Slider not running to the end; only runs first two slides

Question

I'm trying to implement a slider on my landing page. I followed this tutorial on Youtube but only the first two slides work. i slightly modified and only kept three slides. Can anybody give a second glance to my code to see if there is anything I missed? I will really appreciate it.

let items = document.querySelectorAll('.slider .list .item'); //Slider items
//console.log(items.length);

let next = document.getElementById('next');
let prev = document.getElementById('prev');
let thumbnails = document.querySelectorAll('.thumbnail .item'); //Thumbnai items
//console.log(thumbnails.length);

// Config parameter
let countItem = items.length; //The number of items into the series
let itemActive = 0; //The class '.active' counter


//Next Button click event
next.onclick = function() {
  itemActive += 1;

  if (itemActive >= countItem) {
    itemActive = 0;
  }
  showSlider(); //Run this function to display the slider ont he scrren
}

// Click on thumbnail event
thumbnails.forEach((thumbnail, index) => {
  thumbnail.addEventListener('click', () => {
    itemActive = index;
    showSlider();
  });
});

//Run the slider automatically without any click
let refreshInterval = setInterval(() => {
  // Execute the next button click automatically every 3s. 
  next.click();
}, 3000);

function showSlider() {
  // Remove item active old
  let itemActiveOld = document.querySelector('.slider .list .item.active');
  let thumbnailActiveOld = document.querySelector('.thumbnail .item.active');

  itemActiveOld.classList.remove('active');
  thumbnailActiveOld.classList.remove('active');

  // Set class '.active' to new item
  items[itemActive].classList.add('active');
  thumbnails[itemActive].classList.add('active');

  // Clear automatic slider run
  clearInterval(refreshInterval);
}

<!-- SLIDER -->
<div class="slider">
  <!-- List of items -->
  <div class="list">
    <div class="item active">
      <img src="assets/images/student-1.jpg" alt="">
      <div class="content">
        <p>Prospective and Returning Students</p>
        <h2>Plan your success now!</h2>
        <p>Find and apply to the best Higher Education institutions in the Democratic Republic of the Congo.</p>
        <a href="schools.html" class="btn">Track Your Application</a>
      </div>
    </div>
    <div class="item">
      <img src="assets/images/student-2.jpg" alt="">
      <div class="content">
        <p>Colleges & Universities</p>
        <h2>Join Our Community</h2>
        <p>
          Register your school to boost your admissions rate. Your prospective students can apply from anywhere in the world.
        </p>
        <a href="schools.html" class="btn">Visit Our Schools' Directory</a>
      </div>
    </div>
    <div class="item">
      <img src="assets/images/student-5.jpg" alt="">
      <div class="content">
        <p>Education Advisors</p>
        <h2>Meet Our Dedicated Advisors</h2>
        <p>Our team is made of professional education advisors, ready to assist and set you into your pathway to success.</p>
        <a href="advisors.html" class="btn">Schedule a meeting</a>
      </div>
    </div>
  </div>
  <!-- Arrow buttons -->
  <div class="arrows">
    <button id="prev"><</button>
    <button id="next">></button>
  </div>
  <!-- Thumbnail -->
  <div class="thumbnail">
    <div class="item active">
      <img src="assets/images/student-1.jpg" alt="">
      <div class="content">Students</div>
    </div>
    <div class="item">
      <img src="assets/images/student-2.jpg" alt="">
      <div class="content">Schools</div>
    </div>
    <div class="item">
      <img src="assets/images/student-5.jpg" alt="">
      <div class="content">Advisors</div>
    </div>
  </div>

</div>
<!-- SLIDER -->

The sliders are run using javascript. I've double-checked to see if there is any mistake but could not find where the issue could be.

A slider is an input control where you select a value in a range by dragging an indicator. Do you mean slide show? — Barmar, Commented Aug 30 at 21:45
You clear the interval timer in showSlider(), which is called when you do next.click(). So it cancels the automatic repetition. — Barmar, Commented Aug 30 at 21:50
I converted the HTML and JS in your post to a stack snippet, but you need to add the CSS so the class changes will have some effect. — Barmar, Commented Aug 30 at 21:52

Anthony S · Accepted Answer · 2024-08-31 02:47:41Z

The code you posted works well. Probably the issue is you don't have the image in your assets folder with correct image name. The YouTube video is using CSS opacity: 0; to hide inactive slider list items. It may be hard to detect the issue when you don't have the image. So, please review the image names and your html code with relevant images.

To prove that point I have copied the code you posted and slightly modified/included CSS to display the images. Note: That I have used CSS display: none; and display: inline; attribute.

Also, I have commented out clearInterval(refreshInterval); and set the interval to every second.

Images chosen randomly from en.m.wikipedia.org for demonstration purpose only.

addEventListener("load", (event) =>{
  let items = document.querySelectorAll('.slider .list .item'); //Slider items
//console.log(items.length);

let next = document.getElementById('next');
let prev = document.getElementById('prev');
let thumbnails = document.querySelectorAll('.thumbnail .item'); //Thumbnai items
//console.log(thumbnails.length);

// Config parameter
let countItem = items.length; //The number of items into the series
let itemActive = 0; //The class '.active' counter


//Next Button click event
next.onclick = function() {
  itemActive += 1;

  if (itemActive >= countItem) {
    itemActive = 0;
  }
  showSlider(); //Run this function to display the slider ont he scrren
}

// Click on thumbnail event
thumbnails.forEach((thumbnail, index) => {
  thumbnail.addEventListener('click', () => {
    itemActive = index;
    showSlider();
  });
});

//Run the slider automatically without any click
let refreshInterval = setInterval(() => {
  // Execute the next button click automatically every 3s. 
  next.click();
}, 1000);

function showSlider() {
  // Remove item active old
  let itemActiveOld = document.querySelector('.slider .list .item.active');
  let thumbnailActiveOld = document.querySelector('.thumbnail .item.active');

  itemActiveOld.classList.remove('active');
  thumbnailActiveOld.classList.remove('active');

  // Set class '.active' to new item
  items[itemActive].classList.add('active');
  thumbnails[itemActive].classList.add('active');

  // Clear automatic slider run
  //clearInterval(refreshInterval);
}

});

  .slider img {
    width: 100px;
    height:auto;    
  }

  .thumbnail img{
    width: 50px;
    height: auto;
  }

  .thumbnail{

    display: inline-flex;

  }

  .slider .list .item{
    display: none;
  }

  .slider .list .item.active{
    display:inline;
  }

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>




</head>
<body>
<!-- SLIDER -->
<div class="slider">
    <!-- List of items -->
    <div class="list">
      <div class="item active">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Small_Red_Rose.JPG" alt="">
        <div class="content">
          <p>Prospective and Returning Students</p>
          <h2>Plan your success now!</h2>
          <p>Find and apply to the best Higher Education institutions in the Democratic Republic of the Congo.</p>
          <a href="schools.html" class="btn">Track Your Application</a>
        </div>
      </div>
      <div class="item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Big%26Small_edit_1.jpg" alt="">
        <div class="content">
          <p>Colleges & Universities</p>
          <h2>Join Our Community</h2>
          <p>
            Register your school to boost your admissions rate. Your prospective students can apply from anywhere in the world.
          </p>
          <a href="schools.html" class="btn">Visit Our Schools' Directory</a>
        </div>
      </div>
      <div class="item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Small_sport_fishing_boat.jpg" alt="">
        <div class="content">
          <p>Education Advisors</p>
          <h2>Meet Our Dedicated Advisors</h2>
          <p>Our team is made of professional education advisors, ready to assist and set you into your pathway to success.</p>
          <a href="advisors.html" class="btn">Schedule a meeting</a>
        </div>
      </div>
    </div>
    <!-- Arrow buttons -->
    <div class="arrows">
      <button id="prev"><</button>
      <button id="next">></button>
    </div>
    <!-- Thumbnail -->
    <div class="thumbnail">
      <div class="item active">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Small_Red_Rose.JPG" alt="">
        <div class="content">Students</div>
      </div>
      <div class="item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Big%26Small_edit_1.jpg" alt="">
        <div class="content">Schools</div>
      </div>
      <div class="item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Small_sport_fishing_boat.jpg" alt="">
        <div class="content">Advisors</div>
      </div>
    </div>
  
  </div>

</body>
</html>

Collectives™ on Stack Overflow

Slider not running to the end; only runs first two slides

1 Answer 1

Not the answer you're looking for? Browse other questions tagged
javascript
image
slider
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Not the answer you're looking for? Browse other questions tagged javascriptimageslider or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
javascript
image
slider
or ask your own question.