Have a problem with two slideshows on the same page

Hi, Beginner here,
I’m trying to add two slideshows on my website page (one below the other) I have tried but I can’t get both of them to work and I can’t figure it out.

This is the code am using (from w3schools [dot] com/howto/tryit.asp?filename=tryhow_js_slideshow)

1 Like

Welcome to tthe forums, @lala.

Rather than pointing us to the tutorial, it’s much more helpful if you can show us the actual code you are using, which doesn’t work as expected, so that we can help you fix it. There’s a guide here which explains in more detail how best to post your code.

1 Like

That script only allows for one slideshow per page. You would need to modify the script to make it more generic and to account for multiple sliders.

As a quick fix you could simply duplicate the script and some css and change the variables to mySlide2 etc and create another version but that is rather a verbose approach.

e.g.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
	box-sizing:border-box
}
body {
	font-family: Verdana, sans-serif;
	margin:0
}
.mySlides {
	display:none
}
.mySlides2 {
	display:none
}
/* Slideshow container */
.slideshow-container {
	max-width: 1000px;
	position: relative;
	margin: auto;
}
/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}
/* The dots/bullets/indicators */
.dot, .dot2 {
	cursor:pointer;
	height: 13px;
	width: 13px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .dot:hover {
	background-color: #717171;
}
/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
 @-webkit-keyframes fade {
 from {
opacity: .4
}
to {
	opacity: 1
}
}
 @keyframes fade {
 from {
opacity: .4
}
to {
	opacity: 1
}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next, .text {
	font-size: 11px
}
}
</style>
<body>
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img_nature_wide.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="img_fjords_wide.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="img_mountains_wide.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
<br>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>
<div class="slideshow-container">
  <div class="mySlides2 fade">
    <div class="numbertext">1 / 3</div>
    <img src="img_nature_wide.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>
  <div class="mySlides2 fade">
    <div class="numbertext">2 / 3</div>
    <img src="img_fjords_wide.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>
  <div class="mySlides2 fade">
    <div class="numbertext">3 / 3</div>
    <img src="img_mountains_wide.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  <a class="prev" onclick="plusSlides2(-1)">❮</a> <a class="next" onclick="plusSlides2(1)">❯</a> </div>
<br>
<div style="text-align:center"> <span class="dot2" onclick="currentSlide2(1)"></span> <span class="dot2" onclick="currentSlide2(2)"></span> <span class="dot2" onclick="currentSlide2(3)"></span> </div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
</script> 

<script>
var slideIndex2 = 1;
showSlides2(slideIndex2);

function plusSlides2(n) {
  showSlides2(slideIndex2 += n);
}

function currentSlide2(n) {
  showSlides2(slideIndex2 = n);
}

function showSlides2(n) {
  var i;
  var slides2 = document.getElementsByClassName("mySlides2");
  var dots2 = document.getElementsByClassName("dot2");
  if (n > slides2.length) {slideIndex2 = 1}
  if (n < 1) {slideIndex2 = slides2.length}
  for (i = 0; i < slides2.length; i++) {
      slides2[i].style.display = "none";
  }
  for (i = 0; i < dots2.length; i++) {
      dots2[i].className = dots2[i].className.replace(" active", "");
  }
  slides2[slideIndex2-1].style.display = "block";
  dots2[slideIndex2-1].className += " active";
}
</script>
</body>
</html>

A better solution would be to modify the existing JS to handle more than one slider per page but that’s a little complicated for me and a question for the JS forum.:slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.