function showSlides(n) {
let slides = document.getElementsByClassName("image");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (let slide of slides) {
slide.style.display = "none";
}
slides[slideIndex - 1].style.display = "inline-flex";
if (slideIndex > slides.length) {
slideIndex = 0;
slides[slideIndex].style.display = "inline-flex";
slides[slideIndex + 1].style.display = "inline-flex";
} else {
slides[slideIndex].style.display = "inline-flex";
slides[slideIndex + 1].style.display = "inline-flex";
}
}
when the slider went to the last image it does not show the first index image, here is the image of the slider.. it does not go directly to the first index
It has 12 images and it went on the 13 and 14 indexes and then it will go to the first index.
I see several issues.
Self-inflicted off-by-one error
The inbuilt index system in Javascript, and many other languages, starts at 0, with the last element at x-1, giving a total of x elements. For some reason you have decided to use an indexing system that starts at 1. This means you need to be extra-careful.
Two variables, when you probably only intended to have one
You are passing a variable n into the function, and then checking whether it is out-of-range, but setting a different variable, slideIndex. This will not work for cases where n is in-range.
Try this
function showSlides(activeSlide_oneBased) {
let activeSlide = activeSlide_oneBased -1;
const slides = document.getElementsByClassName("image");
if (activeSlide >= slides.length) {
activeSlide = 1
}
if (activeSlide < 0) {
activeSlide = slides.length-1
}
slides[activeSlide].style.display = "inline-flex";
// I *think* you are intending this to make the _next_ slide also visible, and handling the case of having to wrap round to the first slide if you are already on the last.
if (activeSlide+1 >= slides.length) {
slides[0].style.display = "inline-flex";
} else {
slides[activeSlide + 1].style.display = "inline-flex";
}
}
If the above works, you could improve it like this:
function showSlides(activeSlide_oneBased) {
const slides = document.getElementsByClassName("image");
// Conver to zero based, and then wrap round if gone beyond the left or right ends.
let activeSlide = activeSlide_oneBased -1;
activeSlide = (activeSlide + slides.length) % slides.length
// Make all slides invisible
for (let slide of slides) {
slide.style.display = "none";
}
// Make active and next slide visible
slides[activeSlide].style.display = "inline-flex";
const nextSlide = (activeSlide+1) % slides.length;
slides[nextSlide].style.display = "inline-flex";
}
And if you are after conciseness:
function showSlides(activeSlide_oneBased) {
const slides = document.getElementsByClassName("image");
const activeSlide = (activeSlide_oneBased -1 + slides.length) % slides.length
slides.forEach(slide =>{
slide.style.display = "none";
})
slides[activeSlide].style.display = "inline-flex";
slides[(activeSlide+1) % slides.length].style.display = "inline-flex";
}
Related
I am trying to make the first slide in the sequence timeout at a different rate to the rest of the slides.
I think I need something like this - If slide == slide.1, setTimeout to 30000 otherwise 1500
This is what I have already:
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";
if ('undefined' !== typeof dots[slideIndex - 1]) {
dots[slideIndex - 1].className += " active";
}
timer = setTimeout(showSlides, 15000);
}
function pauseShow() {
clearTimeout(timer);
}
you did much code for less function i guess.
When i see it correctly your slide Index indicates to which slide your function should slide to.
In this case you are right, you will need:
if(slideIndex == 1) setTimeout(showSlides, 3000);
else setTimeout(showSlides, 1500);
At the last index you also need a reset of your slideIndex to 1 again.
Its just another if clause again.
I would also suggest you search for "mySlides" not in your recursive function.
You could just search for it before declaring the function and use the global var. This prevents searching in the whole dom every time you want to slide.
Anybody knows what is the issue here? Looking to pause the slider when mouse is on it. I can not figure out what is wrong with it. slider works, but yet it does not pause.
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";
}
var slideIndex = 0;
var timer = null;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
var timer = setTimeout(carousel, 1000);
mouseOver = clearTimeout(timer);
mouseOut = setTimeout(carousel, 1000);
}
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
I am a beginner in javascript and I am searching for a solution to stop my slider after the last picture. The following code shows you the current code about it. The most part is from w3schools.
var slideIndex = 1;
showSlides(slideIndex);
function next_prev(n) {
showSlides(slideIndex += n);
}
function startbild(){
var slides = document.getElementsByClassName("mySlides");
if(slides == 0){} else{
slides[0].style.display = "block";
for (i = 1; i < slides.length; i++) {
slides[i].style.display = "none";
document.getElementById("dia-shows").innerHTML = 1;
}
}
}
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.getElementById("dia-shows").innerHTML = slideIndex;
document.getElementById("dia-gesamt").innerHTML = slides.length;
}
I think, your code is incomplete. Could you post a working example instead where the problem happens?
changing
if (n < 1) {slideIndex = slides.length}
if (n > slides.length) {slideIndex = 1}
to
if (n < 1) {
slideIndex = 1;
} else if (n > slides.length) {
slideIndex = slides.length;
} else {
slideIndex = n;
}
should do what you want in both directions.
When first or last frame is visible, you should hide the related control that allows the user to slide once more.
Whenever a n is passed that is out of the valid range, it gets limited to that range.
if (n > slides.length) {slideIndex = 1} //if last is reached, restart with first
should be
if (n > slides.length) {slidesIndex=slides.length} //if last is reached, stay at last
You could also change
function next_prev(n) {
showSlides(slideIndex += n);
}
To:
function next_prev(n) {
var slides = document.getElementsByClassName("mySlides");
showSlides(slideIndex = Math.min(slideIndex+n,slides.length));
}
Note: w3schools promotes bad styled code, please start learning from MDN, there much better + have better coding style + better explanations. So here is a improved code:
var slideIndex = 1;
var slides;// no need to redefine in every function
function init(){
slides = document.getElementsByClassName("mySlides");//get the slides, store in variable
if(!slides){
return console.error("no slides..");
}
showSlides();//show the first time
setInterval(next_prev,1000,1);//demo ( every 1000ms increase with 1)
}
window.onload=init;//if page loaded, init
function next_prev(n) {
slideIndex=Math.max(Math.min(slideIndex+n,slides.length),1);// slidesIndex stays between slides.length and 1.
showSlides();
}
function showSlides() {//no need to pass n, its equal to slideIndex
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none"; //hide all
}
slides[slideIndex-1].style.display = "block";//show one
document.getElementById("dia-shows").innerHTML = slideIndex;
document.getElementById("dia-gesamt").innerHTML = slides.length;
}
--> https://developer.mozilla.org/de/docs/Web/JavaScript
I try to create a slideShow and i need to retry my function by new argument but when i try to use setInterval() function it just run a one time. WHY REALY?
var sIndex = 0;
var slide = document.getElementsByClassName('slide');
function slider(n) {
if (sIndex + n >= 0 && sIndex + n <= slide.length - 1) {
slide[sIndex].style.display = "none";
sIndex += n;
slide[sIndex].style.display = "block";
} else if (sIndex + n < 0) {
slide[sIndex].style.display = "none";
sIndex = slide.length - 1;
slide[sIndex].style.display = "block";
} else if (sIndex + n > slide.length - 1) {
slide[sIndex].style.display = "none";
sIndex = 0;
slide[sIndex].style.display = "block";
}
}
setInterval(function() {
slider(sIndex);
}, 2000);
sIndex stays 0 all the time have a look at your code.
var sIndex = 0;
var slide = document.getElementsByClassName('slide');
function slider(n) {
// first run: n=0 plus sIndex=0, leads to sIndex stays 0 every loop
if (sIndex + n >= 0 && sIndex + n <= slide.length - 1) {
slide[sIndex].style.display = "none";
sIndex += n;
slide[sIndex].style.display = "block";
} else if (sIndex + n < 0) {
slide[sIndex].style.display = "none";
sIndex = slide.length - 1;
slide[sIndex].style.display = "block";
} else if (sIndex + n > slide.length - 1) {
slide[sIndex].style.display = "none";
sIndex = 0;
slide[sIndex].style.display = "block";
}
console.log(new Date(), sIndex)
}
setInterval(function() {
slider(sIndex);
}, 2000);
<div class="slide"></div>
EDIT: My answer gives the reason, but no solution. #Satpal 's code gives one: Remove n and add 1 instead.
You don't need the variable n remove it.
var sIndex = 0;
var slide = document.getElementsByClassName('slide');
function slider() {
if (sIndex >= 0 && sIndex<= slide.length - 1) {
slide[sIndex].style.display = "none";
sIndex += 1;
slide[sIndex].style.display = "block";
} else if (sIndex < 0) {
slide[sIndex].style.display = "none";
sIndex = slide.length - 1;
slide[sIndex].style.display = "block";
} else if (sIndex > slide.length - 1) {
slide[sIndex].style.display = "none";
sIndex = 0;
slide[sIndex].style.display = "block";
}
}
setInterval(slider, 2000);
how do i make this automatically slide?
I've already made it so you can manually slide them, but i want them moving at the same time.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(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";
dots[slideIndex - 1].className += " active";
}
};
You can use the below code to make it work.
var slideIndex = 1;
$(function () {
automaticSlider();
})
function automaticSlider() {
showSlides(slideIndex);
setInterval(function () { automaticSlider(); }, 1000) // 1000 is 1 sec before calling next slide.
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(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";
dots[slideIndex - 1].className += " active";
}
};
Calling the function automaticSlider() at load, and then set interval is call it automaticSlider() function after 1 sec. you can increase the time as per your convince.