Custom jquery slider

I am trying to create a slider in jquery and get stuck at the end.

I created <ul>and then 4 <li>in this <ul>representing each <li>slide. When I click on the next button, slide 1 animates for slide 2. When I click on the next button, the current slide animates to the next. But how do I animate the last slide to load the first slide.

I am changing the value of the left property for animation among slides. The code is below. Please guide me. Thank!

        current = 0;

        current_slide=1;

        $(document).ready(function(){
            var totalSlides=$(".slider ul li").length;
            $(".slider ul").removeAttr('width');
            $(".slider ul").attr('width',951*totalSlides);

            $('#next img').click(function(){
                current_slide++;
                current -= 951;
                if(current_slide>totalSlides)
                    {
                        current=0;
                        current_slide=1;
                        $(".slider ul").css('left',0);      
                    }
                $(".slider ul").animate({"left":current+"px"}, "slow");
            });

       /* Previous button is not fully functional yet*/
            $('#prev img').click(function(){
                current_slide--;
                current += 951;
                if(current_slide==1)
                    {current=0;current_slide=totalSlides;}
                $(".slider ul").animate({"left":current+"px"}, "slow");
            });
        });
+3
source share
1 answer

, "load 1st slide", , , , . , , $(".slider ul").css('left',0);, .

, 951 * totalSlides, - , 951 * (totalSlides - 1).

    current = 0;

    current_slide=1;

    $(document).ready(function(){
        var totalSlides=$(".slider ul li").length;
        $(".slider ul").removeAttr('width');
        $(".slider ul").attr('width',951*totalSlides);

        $('#next img').click(function(){
            current_slide++;
            current -= 951;
            if(current_slide>totalSlides)
                {
                    current=0;
                    current_slide=1;    
                }
            $(".slider ul").animate({"left":current+"px"}, "slow");
        });

   /* Previous button is not fully functional yet*/
        $('#prev img').click(function(){
            current_slide--;
            current += 951;
            if(current_slide==1)
                {
                    current = 951 * totalSlides;
                    current_slide = totalSlides;
                }
            $(".slider ul").animate({"left":current+"px"}, "slow");
        });
    });

, jQuery, > 10 000 - 1.5. , , scrollLeft


Update:

, , :

+3

Source: https://habr.com/ru/post/1788720/


All Articles