how to show multiple slideshow on single page

Question

i am making a slideshow using w3schools. but this code is unable to show multiple slideshows on single page. can anybody help in modifying this code to work on multiple slideshows. i want to show more than 2 slideshows.

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
}

Dan Nagle · Accepted Answer

Without adding additional classes or ids to the existing tag structure it can be achieved with the following JavaScript code.

// initialisation
function initialiseDataValues() {
  var next, prev, slides;
  // Locate the slideshow containers
  var containers = document.querySelectorAll('div.w3-content.w3-display-container');
  // Loop through the containers
  for (var ix = 0; ix < containers.length; ix++) {
    // Count the number of slides
    slides = containers[ix].getElementsByClassName('mySlides');
    // Add 'data-slides' property to the container
    containers[ix].dataset.slides = slides.length || 0;
    if (containers[ix].dataset.slides > 0) {
      // Add 'data-idx' property to the container
      containers[ix].dataset.idx = 1;
      // Add event handler for 'previous' slide click
      prev = containers[ix].getElementsByClassName('w3-left');
      if (prev) {
        prev[0].addEventListener('click', goPrevSlide);
      }
      // Add event handler for 'next' slide click
      next = containers[ix].getElementsByClassName('w3-right');
      if (next) {
        next[0].addEventListener('click', goNextSlide);
      }
      // Show the first slide in the container
      showSlide(containers[ix], 1);
    }
  }
}

function goToSlide(index) {
  // The container is two levels above this element
  var container = event.target.parentNode.parentNode;
  showSlide(container, index);
}

function goPrevSlide() {
  // The container is two levels above this element
  var container = event.target.parentNode.parentNode;
  showSlide(container, Number.parseInt(container.dataset.idx) - 1);
}

function goNextSlide() {
  // The container is two levels above this element
  var container = event.target.parentNode.parentNode;
  showSlide(container, Number.parseInt(container.dataset.idx) + 1);
}

function showSlide(container, n) {
  var slides = container.getElementsByClassName('mySlides'),
      dots = container.getElementsByClassName('demo'),
      slideIdx = 0,
      dotIdx = 0,
      slideToShow = 0;
  if (n > slides.length) {
    container.dataset.idx = 1;
  } else if (n < 1) {
    container.dataset.idx = slides.length;
  } else {
    container.dataset.idx = n;
  }
  for (slideIdx = 0; slideIdx < slides.length; slideIdx++) {
    slides[slideIdx].style.display = 'none';
  }
  for (dotIdx = 0; dotIdx < dots.length; dotIdx++) {
    dots[dotIdx].classList.remove('w3-white');
  }
  slideToShow = Number.parseInt(container.dataset.idx) - 1;
  slides[slideToShow].style.display = 'block';
  if (slideToShow < dots.length) {
    dots[slideToShow].classList.add('w3-white');
  }
}

initialiseDataValues();

The JavaScript code adds the 'Previous' and 'Next' click event handlers so there is no need for them in your HTML code. Each of the handler functions walks up the DOM tree to get to the slideshow container. If you change the HTML you will need to amend the code.

how to show multiple slideshow on single page

Answers (2)

Related Questions