CODEWITHSUNDEEP
javascriptjquery
Memes
Memes

Reputation: 25

Not working .css() method in slider

'use strict';
$(function () {
    var currentSlide = 1;

    //DOM cache
    var $slider = $('#slider');
    var $slidesContainer = $slider.find('#container');
    var $slides = $slidesContainer.find("li")
    console.log($slides.length);


    //slider
    setInterval(slide, 3000);

    function slide() {
        $slidesContainer.animate({'margin-left': '-='+400}, 800);
        console.log(currentSlide);
        currentSlide++;
        if (currentSlide === $slides.length) {
            currentSlide = 1;
            $slidesContainer.css("margin-left", 0);// <------PROBLEM HERE
        }//end if           
    }//end slide
});//end js

This slider is almost good but I don't know why this method .css() is not working. If is working because variable currentSlide is going to 1 when equals 4 ($slides.length).

Thanks for all answers.

Upvotes: 2

Views: 61

Answers (1)

Satpal
Satpal

Reputation: 133433

You should wait for animation to complete, use its callback method.

$slidesContainer.animate({
    'margin-left': '-=' + 400
}, 800, function() {
    // Animation complete.
    currentSlide++;
    if (currentSlide === $slides.length) {
        currentSlide = 1;
        $slidesContainer.css("margin-left", 0);
    }
});

Upvotes: 4

Related Questions