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.
Related
I'm working on a website that has 2 sliders but the controls on the top slider do not seem to function
http://www.nathangriffithgc.com/gallery.html
How can I target the second slider? I've already changed the ID names but I'm not sure if that is affecting the slider.
Below is a snippet of both my galleries, you'll find that I renamed the top scripts the slides2, the bottom script is the original that works
<script>
var slideIndex = 1;
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";
var dots = document.getElementsByClassName("slide-dot");
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" slide-dot-active", "");
}
dots[slideIndex-1].className += " slide-dot-active";
}
function plusSlides(n) {
slideIndex += n;
showSlides();
}
function currentSlide(n) {
slideIndex = n;
showSlides();
}
var slide2Index = 1;
function showSlides2() {
var slides = document.getElementsByClassName("mySlides2");
if (slide2Index > slides.length) {slide2Index = 1;}
if (slide2Index < 1) {slide2Index = slides.length;}
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide2Index-1].style.display = "block";
var dots = document.getElementsByClassName("slide2-dot");
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" slide2-dot-active", "");
}
dots[slideIndex-1].className += " slide2-dot-active";
}
function plusSlides(n) {
slide2Index += n;
showSlides2();
}
function currentSlide(n) {
slide2Index = n;
showSlides2();
}
window.addEventListener("load", showSlides); window.addEventListener("load", showSlides2);
</script>
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 have implemented automatic and manual image slider together. But I also want to pause the automatic sliding on hover. How can i do this. Here is the code snippet. No external libraries other than jQuery.
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);
}
}
Hi I have a slideshow javascript running on my website but it doesn't seem to be working properly when I change the images back and forth and the automaticity doesn't show image 6. Could someone please help me write it up because I have been trying over a month and reached nowhere.
https://wbd-ownwork-13--15nalaas.repl.co/
<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("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 2}
slides[slideIndex-2].style.display = "block";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
First of all you need not to add the custom controls for changing the slides because the slide show is more than enough.
And secondly you need to change the entire script to the given script only then it is going to work because rest of your script is messing with the slideshow.
Change the entire script from line 94 to line 125 in your HTML to this -
<script>
var slideIndex = 0;
showSlides();
function showSlides(){
var slides = document.querySelectorAll('.mySlides');
for(var i = 0; i < slides.length; i++){
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "block";
slideIndex++;
if(slideIndex > slides.length - 1){slideIndex = 0}
loop();
}
function loop(){
setTimeout(showSlides, 1000);
}
</script>
If still you have a problem the please ask again.
i want to make slide images to automatically replace. Here is code i use for manual replacing by clicking on buttoms. Sorry if it is some basics issue, but i don't realy use javascript. I've got it from w3schools, and try to combine the automatic replacing and this, but didn't work.
Thanks for answers.
PS: There are 3 images now and 4 will be.
var slideIndex = 1;
showDivs();
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
x[slideIndex-1].style.width = "784px";
x[slideIndex-1].style.height = "350px";
}
The thing you need to do is continuously call the function for changing the slides in certain intervals. I am adding the complete code after making changes for the same.
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");
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";
}
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var index = 0;
setInterval(function() {
index++;
if( self.index == self.slides.length ) {
index = 0;
}
currentSlide( index );
}, 2000);
Instead of 2000, you can give any delay you need. Think this solves your problem.