CODEWITHSUNDEEP
javascripthtmlcsssetinterval
Hoang Dinh
Hoang Dinh

Reputation: 167

setInterval not working when create a slideshow efffect with for loop

I want to create a slideshow using setInterval to run auto, but I don't see it iterate!

After each 2s: slide 1 -> slide 2 -> slide 1 -> slide 2 ->...

This is my code:

// debugger;
var getValue1 = document.querySelectorAll(".slide.slide-1 span");
var getValue2 = document.querySelectorAll(".slide.slide-2 span");
var slide = document.querySelectorAll(".slide");
var autoRunSlider = setInterval(function() {
    for (let i = 0; i < slide.length; i++) {
        for (let j = 0; j < getValue1.length; j++) {
            getValue1[j].style.transform = "rotateX(90deg) translateY(-50%)";
            getValue2[j].style.transform = "rotateX(0deg) translateY(0)";

        }
        // if (i >= slide.length - 1) {
        //     for (let j = 0; j < getValue1.length; j++) {
        //         getValue2[j].style.transform = "rotateX(90deg) translateY(-50%)";
        //         getValue1[j].style.transform = "rotateX(0deg) translateY(0)";
        //     }
        // }
    }
}, 2000);

link codepen.io: slideshow

Upvotes: 0

Views: 76

Answers (4)

TsungJui Wang
TsungJui Wang

Reputation: 328

You need to reverse the effect, since setting the transform property multiple times only works once.

// debugger;
let effect1 = true; // Counter for choosing which effect to take
var getValue1 = document.querySelectorAll(".slide.slide-1 span");
var getValue2 = document.querySelectorAll(".slide.slide-2 span");
var slide = document.querySelectorAll(".slide");
var autoRunSlider = setInterval(function() {
    for (let i = 0; i < slide.length; i++) {
        for (let j = 0; j < getValue1.length; j++) {
          if (effect1) {
            getValue1[j].style.transform = "rotateX(90deg) translateY(-50%)";
            getValue2[j].style.transform = "rotateX(0deg) translateY(0)";
          } else { // Reverse the effect
            getValue2[j].style.transform = "rotateX(90deg) translateY(-50%)";
            getValue1[j].style.transform = "rotateX(0deg) translateY(0)";
          }
        }
    }
    effect1 = !effect1
}, 2000);

Upvotes: 1

Tien Duong
Tien Duong

Reputation: 2595

The problem is that you only setting the transitions for moving slide1 to slide2. You need to add transitions for moving slide 2 back to slide 1.

// debugger;
var getValue1 = document.querySelectorAll(".slide.slide-1 span");
var getValue2 = document.querySelectorAll(".slide.slide-2 span");
var slideIndex = 0;
var slide = document.querySelectorAll(".slide");
var autoRunSlider = setInterval(function() {
    for (let i = 0; i < slide.length; i++) {
        for (let j = 0; j < getValue1.length; j++) {
          if (slideIndex === 0) {
            getValue1[j].style.transform = "rotateX(90deg) translateY(-50%)";
            getValue2[j].style.transform = "rotateX(0deg) translateY(0)";
          } else {
             getValue1[j].style.transform = "";
             getValue2[j].style.transform = "";
          }

        }
        // if (i >= slide.length - 1) {
        //     for (let j = 0; j < getValue1.length; j++) {
        //         getValue2[j].style.transform = "rotateX(90deg) translateY(-50%)";
        //         getValue1[j].style.transform = "rotateX(0deg) translateY(0)";
        //     }
        // }
    }
    slideIndex = slideIndex === 0 ? 1 : 0;
}, 2000);

Upvotes: 1

Vasiliy vvscode Vanchuk
Vasiliy vvscode Vanchuk

Reputation: 7169

Try move look out of setInterval

var getValue1 = document.querySelectorAll(".slide.slide-1 span");
var getValue2 = document.querySelectorAll(".slide.slide-2 span");
var slide = document.querySelectorAll(".slide");
var slideNum = 0;
var autoRunSlider = setInterval(function() {
    for (let j = 0; j < getValue1.length; j++) {
        getValue1[j].style.transform = "rotateX(90deg) translateY(-50%)";
        getValue2[j].style.transform = "rotateX(0deg) translateY(0)";
    }
    slideNum++;
    if (slideNum >= slide.length) {
      clearInterval(autoRunSlider);
    }
}, 2000);

Upvotes: 1

Kris
Kris

Reputation: 828

I think the problem is that you are setting the transitions once and never reset them again. So the loop runs and triggers the same transition for each element, that's why the animation only runs once.

You have to reset the animation on the elements that are not visible so that you can animate those again in the next loop.

Upvotes: 1

Related Questions