Jump to content
RickVanLouis

Multiple Slideshows (more than 2)

Recommended Posts

Hi there,

Sorry but my JS-Knowledge is very bad. I tried to implement multiple slideshows wthin one website. I used this tutorial. But I'm not able to create more than two slideshows without bugs. I tried to adjust the JS code but wasn't successful. At least I have to implement 4 slideshows.

My Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}

/* 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;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}
</style>
</head>
<body>

<h2 style="text-align:center">Multiple Slideshows</h2>

<div class="slideshow-container">
  <div class="mySlides1">
    <img src="images/gallery/fulls/06.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="images/gallery/fulls/05.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="images/gallery/fulls/03.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>

<div class="slideshow-container">
  <div class="mySlides2">
    <img src="images/gallery/fulls/03.jpg" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="images/gallery/fulls/02.jpg" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="images/gallery/fulls/01.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
</div>



<div class="slideshow-container">
        <div class="mySlides3">
          <img src="images/gallery/fulls/07.jpg" style="width:100%">
        </div>
      
        <div class="mySlides2">
          <img src="images/gallery/fulls/03.jpg" style="width:100%">
        </div>
      
        <div class="mySlides2">
          <img src="images/gallery/fulls/05.jpg" style="width:100%">
        </div>
      
        <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 2)">&#10095;</a>
      </div>

<script>
var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}
</script>

</body>
</html> 

Standard code from https://www.w3schools.com/howto/howto_js_slideshow.asp (only JS):
 

var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"] 
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1} 
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 
  }
  x[slideIndex[no]-1].style.display = "block"; 
}

Thank you for any help
 

Edited by RickVanLouis

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...