Jump to content

Javascript slideshow not working as expectation


m.s_shohan

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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...