Autoplay on slider doesn't play after showing next div - javascript

I want to have an autoplay in my slider but I encounter a problem. After showing next div it doesn't continue to show another div.
How can I fix this?
Here is my code:
<div class="container">
<div class="mySlides active" style="background-image: url('images/1.jpg')">
</div>
<div class="mySlides" style="background-image: url('images/2.jpg');">
</div>
<div class="mySlides" style="background-image: url('images/3.jpg');">
</div>
</div>
<script>
var currentSlide = 1;
var isPlaying = true;
function nextSlide() {
showSlide(currentSlide += 1)
}
function showSlide() {
var slides = document.getElementsByClassName("mySlides");
if (currentSlide > slides.length) {
currentSlide = 1;
}
for (i = 1; i < slides.length; i++) {
slides[i].style.opacity = "0";
}
slides[currentSlide-1].style.opacity = "1";
slides[currentSlide-1].style.transition = "all .5s";
// slides[slideIndex-1].setAttribute("style", "opacity: 1; transition: ease .5s;");
}
if (isPlaying) {
setTimeout(nextSlide, 1000);
}
</script>


I have modified your provided code a bit. Here is working example:
HTML
<div class="container">
<div class="mySlides" style="background-image: url('images/1.jpg')">1
</div>
<div class="mySlides" style="background-image: url('images/2.jpg');">2
</div>
<div class="mySlides" style="background-image: url('images/3.jpg');">3
</div>
Javascript:
var currentSlide = 1;
var isPlaying = true;
function nextSlide() {
showSlide(currentSlide += 1)
}
function showSlide() {
var slides = document.getElementsByClassName("mySlides");
if (currentSlide >= slides.length) {
currentSlide = 0;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = "0";
slides[i].style.display = "none";
}
slides[currentSlide].style.display = "block";
slides[currentSlide].style.opacity = "1";
slides[currentSlide].style.transition = "all .5s";
// slides[slideIndex-1].setAttribute("style", "opacity: 1; transition: ease .5s;");
}
if (isPlaying) {
setInterval(nextSlide, 500);
}

Related

Javascript automatic slider not stopping, help needed

why wouldn't this work? I am trying to make it so when you click on the video/div that the iframe video is in it would stop the automatic slider but I just can't get it to work.
javascript:
let slideIndex = 0;
showSlides();
let click = 0;
function clicked() {
var button = document.document.getElementsByClassName('slideshow-container');
button.addEventListener('slideshow-container', function handleClick() {
if (click = 1) {
click = 0;
}
else {
click = 1;
}
});
return click;
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("slides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
if (click != 1)
{
setTimeout(showSlides, 6666);
}
}
HTML:
<Center>
<div class="slideshow-container">
<div class="slides fade">
<div class="numbertext">1 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="slides fade">
<div class="numbertext">2 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<div class="slides fade">
<div class="numbertext">3 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</br>
<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</Center>
</div>
<br>
<script src="showSlides.js"></script>
Edit: as requested I swapped out the screenshots for the actual code and spent about 5 minutes trying to figure out how to actually post it and now I need more details but I don't know what to add so I'm writing this.

let slideIndex = 0;
var id = showSlides();
let click = 0;
function clicked() {
var button = document.document.getElementsByClassName('slideshow-container');
button.addEventListener('slideshow-container', function handleClick() {
if (click = 1) {
click = 0;
}
else {
click = 1;
}
});
return click;
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("slides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
if (click != 1)
{
var timeoutId = setTimeout(showSlides, 6666);
return timeoutId
}
}
Then to stop it, just call
clearTimeout(id)

Slideshow code doesn't work in Javascript

I made a slideshow. This is the HTML code!
<div class="slideshow-container">
<div class="mySlides fade">
<img src="img/background.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img/background2.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img/background3.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
and this is the javascript code
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(slideIndex) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (slideIndex > slides.length) { slideIndex = 1; }
if (slideIndex < 1) { slideIndex = slides.length; }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
</script>
but due to some unknown reasons it doesn't work properly, please debug and explain why this code is not working?

You define your index variable twice: slideIndex. Once as a global variable and then as a function parameter, overwriting only the function parameter value. You can remove the function parameter and increment / decrease the slideIndex value in your plusSlides function.
var slideIndex = 1;
showSlides();
function plusSlides(n) {
slideIndex += n;
showSlides();
}
function showSlides() {
var slides = document.getElementsByClassName("mySlides");
if (slideIndex > slides.length) { slideIndex = 1; }
if (slideIndex < 1) { slideIndex = slides.length; }
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}

How stop slide show on mouse over in java script

I want to stop slide show on mouse over and start on mouse out.
I use this code but it doesn't work, and I cant figure out the problem.
here is my code and I would be thank if anybody help me.
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = 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-1].style.display = "block";
dots[slideIndex-1].className += " active";
timer = setTimeout(showSlides, 5000);
}
$("#slideshow-container").mouseenter(function () {
clearInterval(mySlides);
});
$(function () {
$("#slideshow-container").click(function () {
$("#slideshow-container").stop();
})
})
and this link is my code with css and html, maybe help.
http://jsfiddle.net/3kspho6g/2/

Please try below solution
Updated Javascript
<script type="text/javascript">
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = 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-1].style.display = "block";
dots[slideIndex-1].className += " active";
timer = setTimeout(showSlides, 2000);
}
function stopShow(timer) {
clearInterval(timer);
}
function startShow() {
timer = setTimeout(showSlides, 2000);
}
$(function() {
$('.slideshow-container').hover(function() {
stopShow(timer);
}, function() {
timer = setTimeout(showSlides, 2000);
});
});
</script>
HTML
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="https://drawingsdaily.com/wp-content/uploads/2018/06/forms-of-abstract-art-41-best-abstract-paintings-in-the-world-inspirationseek.jpg" style="width:100%;height:400px">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="https://drawingsdaily.com/wp-content/uploads/2018/05/watercolor-painting-art-50-best-watercolor-paintings-from-top-artists-around-the-world.jpg" style="width:100%;height:400px">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="https://www.painterartist.com/static/ptr/product_content/painter/2018/bob-ross/gallery/08.jpg" style="width:100%;height:400px">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="https://afremov.com/images/product/image_427.jpeg" style="width:100%;height:400px">
</div>
<a class="prev" onclick="plusSlides(1)">❮</a>
<a class="next" onclick="plusSlides(-1)">❯</a>
</div>
<div style="text-align:center" class="dot1">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
CSS Same as it is
Hope this help!

If you use setTimeout you need to use clearTimeout and the value need to be your timer:
$("#slideshow-container").mouseenter(function () {
clearTimeout(timer);
});

Slider fadein/fadeout

I have created this slider for my website but I need to apply a fadeIn/out when go next/prev. Can anyone explain me how to do this or show me the code?
JS
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
HTML
<div class="container">
<img class="mySlides" src="http://placehold.it/600x200">
<img class="mySlides" src="http://placehold.it/600x150" style="display:none">
<img class="mySlides" src="http://placehold.it/600x100" style="display:none">
<img class="mySlides" src="http://placehold.it/600x200" style="display:none">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>

I think you can replace this:
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
With this:
$('.mySlides:visible').fadeOut(function() {
$(x[slideIndex-1]).fadeIn();
});
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
$('.mySlides:visible').fadeOut(function() {
$(x[slideIndex-1]).fadeIn();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="mySlides" src="http://placehold.it/600x200">
<img class="mySlides" src="http://placehold.it/600x150" style="display:none">
<img class="mySlides" src="http://placehold.it/600x100" style="display:none">
<img class="mySlides" src="http://placehold.it/600x200" style="display:none">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>

Stop image slider forward button on last image in jquery

I put an image slider on my website to show the image one by one on click event, but on the last image I want to stop image slider. I don't want to repeat image again and I don't want forward slide but we can go back.
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
</script>
HTML:
<div class="w3-content w3-display-container">
<div style="margin-left:150px">
<img class="mySlides" src="../../../../../imageslider2/slide1.jpg" style="width:auto; height:auto"/>
<img class="mySlides" src="../../../../../imageslider2/slide2.jpg" style="width:auto; height:auto"/>
<pre> <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating w3-display-right" onclick="plusDivs(1)">❯</a>
</div>

First you need to get a count of the total number of slides and set it as a variable, which you can do with .length and then you need to add a conditional statement to your plusDivs function to do something(alert in the below example) if the slideIndex value is equal to that of the total number of slides:
var slideIndex = 1,
totalSlides = document.querySelectorAll('.mySlides').length;
showDivs(slideIndex);
function plusDivs(n) {
if (slideIndex === totalSlides) {
alert('End of slideshow');
} else {
showDivs(slideIndex += n);
}
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
<div class="w3-content w3-display-container">
<div style="margin-left:150px">
<img class="mySlides" src="http://placehold.it/250x250" style="width:auto; height:auto"/>
<img class="mySlides" src="http://placehold.it/250x250/000/fff" style="width:auto; height:auto"/>
<pre>❮
❯ </pre>
</div>
</div>
Alternatively, you could use the same approach to simply hide the previous or next buttons if they are at the start or the end of the slideshow.

Categories