I'm having a hard time coming up with a solution on how to clear setInterval when clicking on a specific button(with class "next"). My code is listed bellow, and I'm just starting to learn js and jquery so it's probably in a bad shape.
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
$(document).ready(function(){
function playslider(){
$('.next').trigger('click');
var x = setTimeout(function(){playslider()}, 5000);
}
playslider(); <!--To loop-->
});
</script>
Also if you wouldn't mind helping how can I make the first click to occur 5 seconds after the page is loaded.
Edit: To elaborate more, so you have bigger understanding of what I'm doing and with what I need help.
I am creating a simple automatic picture Slideshow, that has a Next and Previous button. I want to cancel the setInterval(missused with setTimout), when pressing on either Next or Previous button. And I'm having a hard time figuring out where to put the code and how it should look like to clear setInterval time, while simultaneously going to the next picture.
You mix jQuery and DOM in an unhealthy manner var slides = $(".mySlides");
You are looking for clearInterval if you use setInterval and clearTimeout if you use setTimeout
To delay execution use the page load:
var tId ;
function playslider(){
$('.next').trigger('click');
}
$(function() {
tId = setInterval(playslider,5000); // can be stopped with clearInterval(tId);
});
You are actually using setTimeout, not setInterval.
You can cancel timeout using clearTimeout(id)
You can also use setInterval instead:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
$(document).ready(function(){
var intervalId = null;
function enablePlayback(){
if(intervalId == null) {
setInterval(function() {
$('.next').trigger('click'); // you should implement this differently, as this is bad practice.
}, 5000);
}
}
function disablePlayback() {
if(intervalId != null) {
clearInterval(intervalId);
intervalId = null;
}
}
enablePlayback(); <!--To loop-->
$('#ButtonToDisable').click(function() { disablePlayback(); });
$('#ButtonToEnable').click(function() { enablePlayback(); });
});
Related
I hope to get some help here. I think the solution can be very easy but I can't find the problem.
I created an image slider with changing buttons on click. I have the code from the internet and it works fine. The problem is that the carousel doesn't start automatically on the website starter page. The slideshow loop only starts if I click on the first picture.
This is how my .js code looks like. Regards :)
/*SLIDESHOW*/
var slideIndex = 0;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides fade");
var dots = document.getElementsByClassName("dots");
if (n > slides.length) { slideIndex = 3};
if (n < 3) { slideIndex = slides.length};
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";
setTimeout(showSlide, 3000);
}
Add your code inside a document.ready function and try,
$( document ).ready(function() {
//Your Code
});
I have a slideshow in JS and html which works fine until I use a variable stored in localStorage to define which slide to start from when the page refresh/reload.
What works:
- after the page has reloaded, the slideshow starts from the desired slide;
- after the page has reloaded and after the first command forward, the slideshow begins to work correctly.
What does not work:
- after the page has reloaded, moving the slideshow forward for the first time always makes the slideshow begins from the first slide;
- after the page has reloaded, moving the slideshow backward for the first time always makes the variable in the local storage undefined and the slides disappear.
I think the issue is with the showSlides(), but I cannot understand what it is.
Here is my code so far:
// Set local storage
var slideIx = localStorage.getItem('slideIndex');
if (slideIx === null) {
slideIx = 1;
}
var slideIndex = slideIx;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
localStorage.setItem('slideIndex', slideIndex);
console.log(localStorage.getItem('slideIndex'));
}
// Thumbnail image controls
function currentSlides(n) {
showSlides(slideIndex = n);
localStorage.setItem('slideIndex', slideIndex);
console.log(localStorage.getItem('slideIndex'));
}
// Show slides
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
// Arrows control
document.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == '37') {
e.preventDefault();
plusSlides(-1); //left <- show Prev image
} else if (e.keyCode == '39') {
e.preventDefault();
plusSlides(1); // right -> show next image
}
};
Thank you very much for any hint you might have(!).
I think the issue is that you need to convert string to number before you operate with it. The value retrieved from localStorage is always of a String type, while you expect number in your code. Try this:
var slideIx = Number(localStorage.getItem('slideIndex') || 1);
(then next check for null is not needed).
I succeeded the slideShow to show the last picture after refreshing the page by the next code (you can see it here https://jsfiddle.net/mu9otwcy/1/):
var myIndex;
if(localStorage.getItem('slideIx') === null){
myIndex = 0;
}
else{
myIndex = localStorage.getItem('slideIx') -1;
}
console.log(myIndex);
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
console.log(myIndex);
if (myIndex > x.length) {
myIndex = 1;
}
x[myIndex-1].style.display = "block";
var slideIx = localStorage.setItem('slideIx',myIndex);
setTimeout(carousel, 3000);
}
Hi I would like to display one javascript slider but if the size is less that 825px the fonction to be disable I created one code but they don't work. I search here but i dont found any answer about that.
here my code
$(window).ready(function() {
var wi = $(window).width();
$(window).resize(function() {
var wi = $(window).width();
if (wi < 825){
} else {
// Slide function
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";
}
}
});
});
thank you for any help the slide function work perfect but i dont arrive to detect the windows size.
Define a function to do the slide, add a condition to return
function doSlide() {
if (window.innerWidth < 825) {
return
}
// Slide function
...your code
}
As people suggested, call it directly. Attach resize event if you want.
$(window).ready(function() {
doSlide()
window.addEventListener('resize', doSlide)
}
I have the following html, css and script and would like the carousel to switch between the 3 slides automatically as well as give users the option to jump around using the dots. What am I missing?
Live here – https://www.assemblyresearch.co.uk/
Thanks!
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
</script>
How about you try something like this:
<script>
var slideIndex = 1;
setInterval(function(){
showSlides(slideIndex);
slideIndex++;
}, 1000);
...
</script>
This just adds a setInterval() function that iterates every second that just calls the showSlides function and increases the index by one. If you are not familiar with the setInterval function you can think it as a timer that ticks every X milliseconds where X is the number at the end of the function. This one for example ticks every second.
EDIT
I also suggest you think how to manage when the counter goes higher than your maximum slide number. I would just do a simple math function like so: slideIndex = (slideIndex + 1) % slides.lenght. The problem is that you do not have the object slides at that scope so you should bring it out of the showSlides function.
I am using following java-script for a slide show, now I like to pause the loop on mouse-over event on the element "dot", my expertise in java is zero, please help.
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var 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";
setTimeout(showSlides, 5000); // Change text every 5 seconds
}
</script>
A few things. Firstly, I would suggest using setInterval() instead. This allows you to easily stop the timer outside of the function. The syntax is identical to setTimeout(). setInterval() is very similar to setTimeout(), except it will continue to execute the function (the first parameter) until you call clearInterval().
Note that setInterval() (and setTimeout()) returns a value, which can be used for clearInterval() and clearTimeout(), respectively.
Changing your code to utilize setInterval should be fairly straightforward. Given what you have posted above, it might look something like this:
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var 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";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds
Note that I save interval as a variable that can be used later to stop the timer.
Once you have made this change, the solution to your main question becomes much easier. You can set up event handlers by adding the following:
function pauseSlides(event)
{
clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides(event)
{
interval = setInterval(showSlides, 5000);
}
// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
dots[i].onmouseover = pauseSlides;
dots[i].onmouseout = resumeSlides;
}
The entirety of your code, given the above, may now look something like this:
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var 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";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds
// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
dots[i].onmouseover = pauseSlides;
dots[i].onmouseout = resumeSlides;
}
function pauseSlides()
{
clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides()
{
interval = setInterval(showSlides, 5000);
}
</script>
Additionally, for reference:
setInterval() reference: https://www.w3schools.com/jsref/met_win_setinterval.asp
Events in JavaScript: https://www.w3schools.com/jsref/dom_obj_event.asp
Wonderful Aaron, much appreciated response. I just checked the code and its working perfectly.
Can we modify this code further and on-mouse over event we can go to specific slide? i mean by using the same "dot" element? The dots are representing different slides, so I want if a user trigger mouse over event on any dot, the slide display benith that specific dot element.