Jump to content

Javascript slideshow not working as expectation


Recommended Posts

Hi, I want to create a slideshow that will work automatically and also user can change slides manually. The manual slideshow is running but the automatic slideshow function is not running. Also the active-slides class doesn't get activated. Can you please help me on fixing the issue? Here is the code

<!DOCTYPE html>
<html>
<head>
<style>
.project-images {
	max-width: 30%;
	height: 200px;
	position: absolute;
	left: 20px;
}
.mySlides {
	width: 100%;
	height: 200px;
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1s;
	animation-name: fade;
	animation-duration: 1s;
}
.project-images-slideshow {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	left: 10px;
	position: relative;
}
.previous, .next {
	position: absolute;
	top: 48%;
	margin-top: -10px;
	color: white;
	font-size: 20px;
	padding:10px;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.previous {
	left: 0;
	border-radius: 0px 4px 4px 0px;
	
}
.next {
	right: 0;
	border-radius: 4px 0px 0px 4px;
}
.previous:hover,.next:hover {
	background-color: rgba(0,0,0);
	background-color: rgba(0,0,0,0.6);
	cursor: pointer;
}
.dots-container {
	text-align: center;
	margin: 10px 5px;
}
.dots-container .dot {
	display: inline-block;
	width: 80px;
	height: 50px;
	opacity: 0.4;
	transition: 0.5s;
	cursor: pointer;
}
.active-slides {
	opacity: 1;
}
/**Fading animation to the mySlides class**/
@-webkit-keyframes fade {
	from {opacity: 0}
	to {opacity: 1}
}
@keyframes fade {
	from {opacity: 0}
	to {opacity: 1}
}
</style>
</head>
<body>
<div class= "project-images">
   <div class= "project-images-slideshow">
	<img src= "http://www.w3schools.com/howto/img_nature_wide.jpg" class= "mySlides"/>
	<img src= "http://www.w3schools.com/howto/img_fjords_wide.jpg" class= "mySlides"/>
	<img src= "http://www.w3schools.com/howto/img_mountains_wide.jpg" class= "mySlides"/>
	<span class= "previous" onclick= "plusSlide(-1)">❰</span>
	<span class= "next" onclick= "plusSlide(+1)">❱</span>
   </div>
   <div class= "dots-container">
	<img src= "http://www.w3schools.com/howto/img_nature_wide.jpg" class= "dot" onclick= "currentSlide(1)"/>
	<img src= "http://www.w3schools.com/howto/img_fjords_wide.jpg" class= "dot" onclick= "currentSlide(2)"/>
	<img src= "http://www.w3schools.com/howto/img_mountains_wide.jpg" class= "dot" onclick= "currentSlide(3)"/>
   </div>
</div>
<script>
var slideIndex = 1, t, dots;
function slideshow(n) {
	'use strict';
	var i,
		mySlides = document.getElementsByClassName("mySlides"),
	    dots = document.getElementsByClassName("dot");
	if (n > mySlides.length) {
		slideIndex = 1;
	}
	if (n < 1) {
		slideIndex = mySlides.length;
	}
	for (i = 0; i < mySlides.length; i++) {
		mySlides[i].style.display = "none";
	}
	for (i = 0; i < dots.length; i++) {
		dots[i].className = dots[i].className.replace(" active-slides", "");
	}
	mySlides[slideIndex - 1].style.display = "block";
	dots[slideIndex - 1].className += " active-slides";
}
function autoSlideshow() {
	'use strict';
	var slideIndex = 0,
		i,
		mySlides = document.getElementsByClassName("mySlides");
	for (i = 0; i > mySlides.length; i++) {
		mySlides[i].style.display = "none";
		dots[i].className = dots[i].className.replace(" active-slides", "");
	}
	slideIndex++;
	if (slideIndex > mySlides.length) {
		slideIndex = 1;
	}
	mySlides[slideIndex - 1].style.display = "block";
	dots[slideIndex - 1].className += " active-slides";
	t = setTimeout(autoSlideshow, 5000);
}
function plusSlide(n) {
	'use strict';
	slideshow(slideIndex += n);
}
function currentSlide(n) {
	'use strict';
	slideshow(slideIndex = n);
}
slideshow(slideIndex);
autoSlideshow();
</script>
</body>
</html>
Link to post
Share on other sites

The dots are not defined within autoslideshow and they are not global, so an error 'undefined' will show, stopping autoslideshow.

 

Also

 

for (i = 0; i > mySlides.length; i++) {
mySlides[i].style.display = "none";
dots[i].className = dots[i].className.replace(" active-slides", "");
}

 

So you want to target 'mySlides' images that are GREATER than the actual total amount of images? How will that work?

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...