Javascript Question posted in
A very good W3school tutorial can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks guys for your inputs. I finally figured out the issue. I needed to remove the clearInterval(refreshInterval) call.

    Now it works perfectly.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search