.mySlides1,.mySlides2,.mySlides3 {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: relative;top:50%;width: auto;padding-right:8vw;padding-left:8vw;color: white;font-weight: bold;font-size:8vw;transition:0.6s ease;border-radius:03px3px0;user-select: none;}/* Position the "next button" to the right */.next {right:0;border-radius:3px003px;}/* On hover, add a grey background color */.prev:hover,.next:hover {background-color:#f1f1f1;color: black;}
Javascript:
var slideIndex =[1,2];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]=2}if(n <2){slideIndex[no]= x.length}for(i =0; i < x.length; i++){
x[i].style.display ="none";}
x[slideIndex[no]-2].style.display ="block";}
More than 2 image slideshows
in Multimedia
Posted
I have the same problem.
It shows the first two Slideshows with picture and arrow, but the third one shows only the arrows.
HTML:
CSS:
Javascript: