I am unable to scroll through the images using the indicator buttons that are located below the carousel. After combing through the code several times, I realize the difficulty stems from not being able to connect the carousel class to the indicator buttons. I don't have an issue with the arrows just the indicator button dots below the carousel. I'm not sure what I'm doing incorrectly. Thank you in advance. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function goRight() { document.querySelector(".carousel-container").scrollLeft += 640; } function goLeft() { document.querySelector(".carousel-container").scrollLeft -= 640; } var btn = document.getElementsByClassName("btn"); var slide = document.getElementById("slide") btn[0].onclick = function() { slide.style.transform = "translateX(0px)"; for (i = 0; i < 4; i++) { btn[i].classList.remove("active"); } this.classList.add("active"); } btn[1].onclick = function() { slide.style.transform = "translateX(-670)"; for (i = 0; i < 4; i++) { btn[i].classList.remove("active"); } this.classList.add("active"); } btn[2].onclick = function() { slide.style.transform = "translateX(-1340)"; for (i = 0; i < 4; i++) { btn[i].classList.remove("active"); } this.classList.add("active"); } <!-- language: lang-css --> .main_3 { display: flex; flex-direction: row; justify-content: center; margin-top: 10rem; } .carousel-container { display: flex; flex-direction: row; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin: 5rem; width: 640px; overflow: hidden; } .carousel { display: flex; flex-direction: row; justify-content: center; } .main-slide { height: 100%; } .main-slide>img { height: 100%; } .slide-show { display: flex; flex-direction: column; justify-content: center; height: 310px; padding: 35px; } h1 { text-align: center; font-size: 25px; margin-bottom: 5rem; margin-right: 6rem; } .slide-show>p { font-size: 20px; color: #000000 } .cta-btn-case-study { color: #ffffff; background-color: #000000; font-size: 20px; font-weight: bold; padding: 10px 25px 10px 25px; margin-top: 5rem; margin-right: 5rem; } .arrow>img { margin-top: 20rem; width: 100%; height: 20vh; } .main-slide { display: flex; justify-content: center; align-items: center; scroll-snap-align: start; flex-shrink: 0; width: 240px; height: 500px; margin-right: 50px; margin-bottom: 5rem; } .indicator { display: flex; flex-direction: row; justify-content: center; align-items: flex-end; } .btn { display: inline-block; height: 15px; width: 15px; background: #000000; margin: 4px; cursor: pointer; transition: 0.5s; } .indicator>.active { width: 45px; } <!-- language: lang-html --> <section class="main_3"> <div class="arrow"> <img src="http://placehold.it/150" alt="go to previous slide" onclick="goLeft()"> </div> <div class="carousel-container" id="slide"> <div class="carousel"> <div class="main-slide"><img src="http://placehold.it/360x150" alt="Dummy Image" /> </div> <div class="slide-show"> <h1>Medical App</h1> <p>Lorem ipsum dolor sit amet. Et consequatur impedit et facere beatae aut aliquam sint eum quos delectus eum pariatur quia sed obcaecati itaque nam alias repudiandae.</p> <a href="Projects.html"><button class="cta-btn-case-study">View Case Study</button></a> </div> </div> <div class="carousel"> <div class="main-slide"><img src="http://placehold.it/360x150" alt="Dummy Image" /> </div> <div class="slide-show"> <h1>Fitness App</h1> <p>Lorem ipsum dolor sit amet. Et consequatur impedit et facere beatae aut aliquam sint eum quos delectus eum pariatur quia sed obcaecati itaque nam alias repudiandae.</p> <a href="Projects.html"><button class="cta-btn-case-study">View Case Study</button></a> </div> </div> <div class="carousel"> <div class="main-slide"><img src="http://placehold.it/360x150" alt="Dummy Image" /> </div> <div class="slide-show"> <h1>Sports Betting App</h1> <p>Lorem ipsum dolor sit amet. Et consequatur impedit et facere beatae aut aliquam sint eum quos delectus eum pariatur quia sed obcaecati itaque nam alias repudiandae.</p> <a href="Projects.html"><button class="cta-btn-case-study">View Case Study</button></a> </div> </div> </div> <div class="arrow"> <img src="http://placehold.it/150" alt="go to next slide" onclick="goRight()"> </div> </section> <div class="indicator"> class="btn active"></span> class="btn"></span> class="btn"></span> class="btn"></span> </div> <!-- end snippet -->
I have tried making the carousel active as well in addition to listing it in the script section but was unsuccessful in my attempts.
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)