Click here to Skip to main content
15,884,237 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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 -->


What I have tried:

I have tried making the carousel active as well in addition to listing it in the script section but was unsuccessful in my attempts.
. I have also tried placing the indicator buttons in the carousel but it scrolls along with the images.
Posted
Updated 31-Mar-23 4:48am
Comments
gggustafson 31-Mar-23 14:39pm    
See https://www.codeproject.com/Articles/5336578/Lightweight-Carousel-Using-only-HTML-CSS-JavaScrip

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900