Multiple Slideshows On One Page Makes The First One Not Work Anymore
First of all I know this question's been asked before the answer wasn't solving my problem so I'd like to ask it again : I used a Slideshow code from 'W3school' wich provides a nic
Solution 1:
Main problem in their code is that it is made, well... for one slideshow, and when you try to apply it to multiple slideshows, some serious problems arise, as you have experienced. They used global vars (index, n), which is not problem when you have one slideshow, but with more slideshows - hard to handle stuff, and it is hard to get reference to current slideshow div with existing concept.
And, yes, this is plain javascript slideshow, NO jQuery here. I've changed slightly your HTML and CSS (dots div is INSIDE slideshow div, just for easier targetting), also, i've removed inline event handlers, just to make things little easier and cleaner.
This could be solved on many ways, i've choosed this one:
(function() {
init(); //on page load - show first slide, hidethe restfunctioninit() {
parents = document.getElementsByClassName('slideshow-container');
for (j = 0; j < parents.length; j++) {
var slides = parents[j].getElementsByClassName("mySlides");
var dots = parents[j].getElementsByClassName("dot");
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
dots = document.getElementsByClassName('dot'); //dots functionalityfor (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
slides = this.parentNode.parentNode.getElementsByClassName("mySlides");
for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove('active');
slides[j].classList.remove('active-slide');
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.classList.add('active');
slides[index].classList.add('active-slide');
}
}
//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
current = this.parentNode;
var slides = current.getElementsByClassName("mySlides");
var dots = current.getElementsByClassName("dot");
curr_slide = current.getElementsByClassName('active-slide')[0];
curr_dot = current.getElementsByClassName('active')[0];
curr_slide.classList.remove('active-slide');
curr_dot.classList.remove('active');
if (this.className == 'next') {
if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
curr_slide.nextElementSibling.classList.add('active-slide');
curr_dot.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
if (this.className == 'prev') {
if (curr_slide.previousElementSibling) {
curr_slide.previousElementSibling.classList.add('active-slide');
curr_dot.previousElementSibling.classList.add('active');
} else {
slides[slides.length - 1].classList.add('active-slide');
dots[slides.length - 1].classList.add('active');
}
}
}
}
})();/* Slideshow container */.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 03px3px0;
}
/* Position the "next button" to the right */.next {
right: 0;
border-radius: 3px003px;
}
/* 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: 8px12px;
position: absolute;
bottom:20px;
width: 100%;
text-align: center;
}
.mySlides {
display:none;
}
.active-slide {
display:block;
}
/* Number text (1/3 etc) */.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 02px;
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}
}<divclass="slideshow-container"><divclass="mySlides fade"><divclass="numbertext">1 / 4</div><imgsrc="http://www.w3schools.com/howto/img_mountains_wide.jpg"style="width:100%"><divclass="text">Caption Text</div></div><divclass="mySlides fade"><divclass="numbertext">2 / 4</div><imgsrc="http://www.w3schools.com/howto/img_fjords_wide.jpg"style="width:100%"><divclass="text">Caption Two</div></div><divclass="mySlides fade"><divclass="numbertext">3 / 4</div><imgsrc="http://www.w3schools.com/howto/img_nature_wide.jpg"style="width:100%"><divclass="text">Caption Three</div></div><divclass="mySlides fade"><divclass="numbertext">4 / 4</div><imgsrc="http://placehold.it/1000x350"style="width:100%"><divclass="text">Caption Four</div></div><aclass="prev">❮</a><aclass="next">❯</a><divstyle="text-align:center"><spanclass="dot"></span><spanclass="dot" ></span><spanclass="dot" ></span><spanclass="dot"></span></div></div><br><divclass="slideshow-container"><divclass="mySlides fade"><divclass="numbertext">1 / 3</div><imgsrc="http://www.w3schools.com/howto/img_mountains_wide.jpg"style="width:100%"><divclass="text">Caption Text</div></div><divclass="mySlides fade"><divclass="numbertext">2 / 3</div><imgsrc="http://www.w3schools.com/howto/img_fjords_wide.jpg"style="width:100%"><divclass="text">Caption Two</div></div><divclass="mySlides fade"><divclass="numbertext">3 / 3</div><imgsrc="http://www.w3schools.com/howto/img_nature_wide.jpg"style="width:100%"><divclass="text">Caption Three</div></div><aclass="prev" >❮</a><aclass="next">❯</a><divstyle="text-align:center"><spanclass="dot"></span><spanclass="dot"></span><spanclass="dot"></span></div></div><br>So, this should work if you keep current HTML structure of slideshow divs, and you can have unlimited numbes of independent slideshows. This is pretty old-fashioned js, and it should be clear, if something's not clear, i can explain more...or try to explain better. :)
Solution 2:
I've created a solution here:
var sliderObjects = [];
createSliderObjects();
functionplusDivs(obj, n) {
var parentDiv = $(obj).parent();
var matchedDiv;
$.each(sliderObjects, function(i, item) {
if ($(parentDiv[0]).attr('id') == $(item).attr('id')) {
matchedDiv = item;
returnfalse;
}
});
matchedDiv.slideIndex=matchedDiv.slideIndex+n;
showDivs(matchedDiv, matchedDiv.slideIndex);
}
functioncreateSliderObjects() {
var sliderDivs = $('.slider');
$.each(sliderDivs, function(i, item) {
var obj = {};
obj.id = $(item).attr('id');
obj.divContent = item;
obj.slideIndex = 1;
obj.slideContents = $(item).find('.mySlides');
showDivs(obj, 1);
sliderObjects.push(obj);
});
}
functionshowDivs(divObject, n) {
debugger;
var i;
if (n > divObject.slideContents.length) {
divObject.slideIndex = 1
}
if (n < 1) {
divObject.slideIndex = divObject.slideContents.length
}
for (i = 0; i < divObject.slideContents.length; i++) {
divObject.slideContents[i].style.display = "none";
}
divObject.slideContents[divObject.slideIndex - 1].style.display = "block";
}<linkhref="http://www.w3schools.com/lib/w3.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h2class="w3-center">Manual Slideshow</h2><divclass="w3-content w3-display-container slider"id="div1"><imgclass="mySlides"src="https://i.imgur.com/eLarayS.jpg"style="width:100%"><imgclass="mySlides"src="https://i.imgur.com/xpOiMWh.jpg"style="width:100%"><imgclass="mySlides"src="https://i.imgur.com/lgcC8Y5.jpg"style="width:100%"><imgclass="mySlides"src="http://i.imgur.com/ufmiVTQ.jpg"style="width:100%"><aclass="w3-btn-floating w3-display-left"onclick="plusDivs(this,-1)">❮</a><aclass="w3-btn-floating w3-display-right"onclick="plusDivs(this,1)">❯</a></div><divclass="w3-content w3-display-container slider"id="div2"><imgclass="mySlides"src="https://i.imgur.com/eLarayS.jpg"style="width:100%"><imgclass="mySlides"src="https://i.imgur.com/xpOiMWh.jpg"style="width:100%"><imgclass="mySlides"src="https://i.imgur.com/lgcC8Y5.jpg"style="width:100%"><imgclass="mySlides"src="http://i.imgur.com/ufmiVTQ.jpg"style="width:100%"><aclass="w3-btn-floating w3-display-left"onclick="plusDivs(this, -1)">❮</a><aclass="w3-btn-floating w3-display-right"onclick="plusDivs(this, 1)">❯</a></div>you can now add as many divs for sliders with 'slider' class and a unique id.
Solution 3:
Problem is solved here through an array and index-manipulation
array should be sized on the amount of slideshows
var slideIndex = newArray(2);
slideIndex[0]=1;
slideIndex[1]=1;
showSlides(1, 0);
showSlides(1, 1);
functionplusSlides(n, slideshownumber)
{
slideIndex[slideshownumber] = slideIndex[slideshownumber] + n;
showSlides( slideIndex[slideshownumber], slideshownumber );
}
functioncurrentSlide(n, slideshownumber)
{
slideIndex[slideshownumber] = n;
showSlides(slideIndex[slideshownumber], slideshownumber);
}
functionshowSlides(n, slideshownumber)
{
var i;
Building name here on 'slider' + slideshownumer, 0 based count (important)
var slideshowname = "slider" + slideshownumber;
var slides = document.getElementsByName(slideshowname);
Building name here on 'dot' + slideshownumer, 0 based count (important)
var dotname = "dot" + slideshownumber;
var dots = document.getElementsByName(dotname);
if (n > slides.length)
{
slideIndex[slideshownumber] = 1;
}
if (n < 1)
{
slideIndex[slideshownumber] = 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[slideshownumber]-1].style.display = "block";
dots[slideIndex[slideshownumber]-1].className += " active";
}
example of a slideshow, dot and slider name should progress to slider1, slider2, ...
<divclass="slideshow-container"><divclass="mySlides fade"name="slider0"><divclass="numbertext">1 / 2</div><imgsrc="http://www.w3schools.com/howto/img_mountains_wide.jpg"style="width:100%"></div><divclass="mySlides fade"name="slider0"><divclass="numbertext">2 / 2</div><imgsrc="http://www.w3schools.com/howto/img_fjords_wide.jpg"style="width:100%"></div>plusSlides(-1 for back, slideshow 0) plusSlides(1 for forward, slideshow 0)
<aclass="prev"onclick="plusSlides(-1,0)">❮</a><aclass="next"onclick="plusSlides(1,0)">❯</a></div>initializing
<script> currentSlide(1,0)</script>function currentSlide(slidenumber, slideshownumber) for both dots and previous / next buttons !
<divstyle="text-align:center"><spanclass="dot"name="dot0"onclick="currentSlide(1,0)"></span><spanclass="dot"name="dot0"onclick="currentSlide(2,0)"></span></div>Next slider named slider1
<divclass="slideshow-container"><divclass="mySlides fade"name="slider1"><divclass="numbertext">1 / 2</div><imgsrc="http://www.w3schools.com/howto/img_nature_wide.jpg"style="width:100%"></div><divclass="mySlides fade"name="slider1"><divclass="numbertext">2 / 2</div><imgsrc="http://www.w3schools.com/howto/img_mountains_wide.jpg"style="width:100%"></div>Arguments changed for slider1 now
<aclass="prev"onclick="plusSlides(-1,1)">❮</a><aclass="next"onclick="plusSlides(1,1)">❯</a></div><script> currentSlide(1,1)</script><divstyle="text-align:center"><spanclass="dot"name="dot1"onclick="currentSlide(1,1)"></span><spanclass="dot"name="dot1"onclick="currentSlide(2,1)"></span></div>
Post a Comment for "Multiple Slideshows On One Page Makes The First One Not Work Anymore"