I am trying to understand why this code isn't going back to slideIndex = 0;
Can someone please explain, at the forth click I am getting undefined instead of jumping back to the first index of the slide?
Thank you for explaining.
slideIndex = 0;
function nextSlide() {
console.log(slides[slideIndex]);
slideIndex++;
if(slideIndex > slides.length){
slideIndex = 0;
}
}
Actually this the whole code, so I am trying to understand why the slideIndex is not jumping back to slideIndex=0;
One the slideIndex > myArray.length; it needs to jump back to the initializes slideIndex, but I am getting this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at HTMLButtonElement.
Please help:
slideIndex=0;
const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");
let myArray = document.querySelectorAll("img");
let i = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
nextbtn.addEventListener("click", function(){
myArray[slideIndex+1].style.display="block";
slideIndex++;
if(slideIndex >= myArray.length-1){
console.log("yes");
slideIndex=0;
}
});
prevbtn.addEventListener("click", function(){
});
(this answer refers to code supplied by the author within another answer)
the problem is this line: myArray[slideIndex+1].style.display="block";
let's say there are 9 items in myArray and slideIndex is 8. then the above tries to set the style on myArray[9] which does not exist.
you can fix this by either moving the style change to after you've adjusted and validated the slideIndex (in your next two lines), or you can use a modulus adjustment such as this: myArray[(slideIndex+1)%myArray.length].style.display="block";
This is working, but I am not sure if this a good written code, except that I can simplify the code.
let slideIndex=0;
const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");
let myArray = document.querySelectorAll("img");
let i = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
nextbtn.addEventListener("click", function(){
if(slideIndex == 0){
slideIndex = slideIndex + 1;
}
if(slideIndex > myArray.length-1){
slideIndex = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
}
if(slideIndex<myArray.length){
myArray[slideIndex].style.display = "block";
console.log(slideIndex);
}
slideIndex++;
});
prevbtn.addEventListener("click", function(){
});
Thank you for answering, but I am using this: myArray[slideIndex+1].style.display="block"; for jumping by first click to next image otherwise you have to click twice before going to next image.
I have now this code which seems to work except that I have to click twice when page load to get the next image.
How can that be fixed?
let slideIndex=0;
const prevbtn = document.querySelector(".prev");
const nextbtn = document.querySelector(".next");
let myArray = document.querySelectorAll("img");
let i = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
nextbtn.addEventListener("click", function(){
if(slideIndex > myArray.length-1){
slideIndex = 0;
for (i = 0; i < myArray.length; i++) {
myArray[i].style.display = "none";
}
myArray[slideIndex].style.display = "block";
}
myArray[slideIndex].style.display = "block";
console.log(slideIndex);
slideIndex++;
});
prevbtn.addEventListener("click", function(){
});
Related
I have this function that loops through divs (cards) and every 3 seconds shoe the next one. kind of a slide show, a gallery.
I wish to run this function on multiple "galleries" (that are built exactly the same). How can I acheieve that?
here's the js that right now collect all 'cards' in the page, I want it to take the cards of each gallery and run it on the gallery itself:
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("card");
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = "0";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.opacity = "1";
setTimeout(showSlides, 3000);
}
I hope I'm being understood - thanks a lot in advance!
You almost achieve it : )
function slideIt(elementId) {
var slideIndex = 0;
// showSlides();
function showSlides() {
var i;
// var slides = document.getElementsByClassName("card");
var slides = document.getElementsById(elementId);
// ....
}
showSlides();
}
slideIt("card1")
slideIt("card2")
I used this eventually and it works great:
const elements = document.querySelectorAll('.today-show');
var timer = document.getElementById('timer').innerHTML;
function intervalFunction(slideIndex) {
var i;
const currentElement = this;
var slides = currentElement.querySelectorAll(".home-show-title");
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove('home-title-appear');
}
setTimeout(function(){
slides[slideIndex].classList.add('home-title-appear');
},800)
}
elements.forEach(element => {
const boundIntervalFunction = intervalFunction.bind(element);
let slideIndex = 1;
setInterval(() => {
boundIntervalFunction(slideIndex);
slideIndex++;
if (slideIndex > 2) {slideIndex = 0 }
}, timer+"000");
});
thanks for the help!
this function loops trough a div called mySlides, and sets the current slide on display block and the one before, back to a display none.
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var info = document.getElementsByClassName("numbertext");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
I want to deley this display block for 1 second, i dont know how to setTimeOut() to such a function.
slides[slideIndex - 1].style.display = "block";
};
Your bottom for loop would look like this
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
setTimeout(function(){
slides[i - 1].style.display = "block";
}, 1000) //time in ms
}
I'm trying to add manual control to an auto slider: https://jsfiddle.net/t8ap0gvz/ The auto play works but the manual controls (prev/next & dots) don't function. What am I doing wrong?
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no-1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 4 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}
In the answer above,he said about the DOM to load, in JSfiddle in the option of the javascript change the order in where the javascript is write. For functions in onclick is better put after all the html, by default JSfiddle put in windows.onload so only change the order in No wrap - bottom of and this will work.
In LOAD TYPE select that option
In a real code HTML the script tag will be in the end of your HTML body. In a script tag.
I think it's loading the functions before the html. When I move the call of showSlides() to like below it works:
// Await DOM to be loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
showSlides();
});
} else {
showSlides();
}
I am making an image slideshow in JavaScript and to better understand the code, I changed the parameter of function slideshow(n) to function slideshow(slideIndex), but noticed it didn't work, can you please help me figure out what is the difference between these two parameters of the function, and why the second parameter in function slideshow(slideIndex) doesn't work?
var slideIndex = 1;
slideshow(slideIndex);
function nextPrev(n){
slideshow(slideIndex += n);
}
function slideshow(slideIndex){
// why "function slideshow(slideIndex)" stops executing after some
// slides, however function slideshow(n) works properly here?
var x = document.getElementsByClassName("slide");
var dot = document.getElementsByClassName("dot");
if(slideIndex > x.length) slideIndex = 1;
if(slideIndex < 1) slideIndex = x.length;
for(var i=0; i < dot.length; i++){
dot[i].className = dot[i].className.replace(" active", "");
}
for(var i = 0 ; i < x.length; i++){
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
dot[slideIndex-1].className += " active";
}
A parameter variable is always a local variable. So when you use slideIndex as the parameter variable, it shadows the global variable with the same name.
As a result, when you do:
if(slideIndex > x.length) slideIndex = 1;
if(slideIndex < 1) slideIndex = x.length;
it only affects the local variable, not the global variable, so these changes don't persist when the function returns.
If the function is going to update the global variable, there's really no good reason for it to take the index as a parameter.
function nextPrev(n) {
slideIndex += n;
slideshow();
}
function slideshow() {
var x = document.getElementsByClassName("slide");
var dot = document.getElementsByClassName("dot");
if (slideIndex > x.length) {
slideIndex = 1;
} else if (slideIndex < 1) {
slideIndex = x.length;
}
for (var i = 0; i < dot.length; i++) {
dot[i].className = dot[i].className.replace(" active", "");
}
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
dot[slideIndex - 1].className += " active";
}
Alternately, you could put the code that checks slideIndex against the array limits in the caller, and have slideshow() simply display the slide without also updating slideIndex.
function nextPrev(n) {
var slideCount = document.getElementsByClassName("slide").length;
slideIndex += n;
if (slideIndex > slideCount) {
slideIndex = 1;
} else if (slideIndex < 1) {
slideIndex = slideCount;
}
slideshow(slideIndex);
}
function slideshow(slideIndex) {
var x = document.getElementsByClassName("slide");
var dot = document.getElementsByClassName("dot");
for (var i = 0; i < dot.length; i++) {
dot[i].className = dot[i].className.replace(" active", "");
}
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
dot[slideIndex - 1].className += " active";
}
Also, rather than subtracting 1 when using slideIndex as the array index, you should just set its values to the range 0 to length-1 rather than 1 to length. Get used to counting from 0 when dealing with array indexes.
$("#forward_carousel").click( () => {
//sets timeout back and starts
clearTimeout(timeout);
timeout = 0;
var i;
var x = $(".carousel_size");//class for the pictures in carousel
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";
timeout =setInterval(carousel, 5000);
})
$("#backward_carousel").click( () => {
clearTimeout(timeout);
timeout = 0;
var i;
var x = $(".carousel_size");//class for the pictures in carousel
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex--;
if (slideIndex < x.length){slideIndex = 3}
x[slideIndex-1].style.display = "block";
timeout =setInterval(carousel, 5000);
})
the forward button is working, but the backward button is just working if the current picture is at index 1. If the index is not at 1 the backward button is not working at all.
Your condition for backward index is not correct.
Change this line:
if (slideIndex < x.length){slideIndex = 3}
To this:
if (slideIndex < 0){slideIndex = x.length}