怎么办？（oop Slider javascript 和 jquery）

Question

** hey guys i've got 2 problems; 1: when i set (this.counter = 0) slideFunk method() done once for eq(0) but it can't go to the next eq

2: i want it be infinity loop when (_counter = last pic) _counter come back to 0

i've got 6 pics **

// OOP SLIDER
$("img").css("left" , "700px")
$("img").eq(0).css("left" , 0)

class Slider{
    constructor(_counter) {
        this.counter = _counter
        this.interval = 900
        this.delay = 1500
    }

    slideFunc=()=>{
        $("img").eq(this.counter).animate({left: 0}, this.interval ,()=> {
            $("img").eq(this.counter).animate({left: 0}, this.delay,()=> {
                $("img").eq(this.counter).animate({left: (-1 * 700)}, this.interval  , ()=> {
                    $(this).css("left", "700px")
                });
               // this.counter = ++this.counter >= $("img").length ? 0 : this.counter;
            });
        });
    }
}

let sliderobj = new Slider(0)

sliderobj.slideFunc()

Answer 1

I think, you don't need a counter for that, use instead each() function for iterate throught all images inside of a infinite loop.

https://api.jquery.com/each/

At same time i see you use in animate function a callback into arg3, thats wrong, is arg4 where you need put this callback.

I will put you an example of how to do that, you can modify it for your needs.

 // OOP SLIDER //$("img").css("left", "700px") //$("img").eq(0).css("left", 0) $("img").css("width", "30px").css({display: "block", position: "relative"}); class Slider{ constructor(){ this.interval = 1000; this.delay = 1500; } slideFunc(){ $("img").each(function(index, element){ $(element).animate({left: "+=700px"}, this.interval, null, function(){ $(this).css({left: "100px"}); //End }); }); this.slideFunc(); } } let sliderobj = new Slider(); sliderobj.slideFunc();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/>