jQuery滑块从最后到第一个过渡

Question

By default, when it's on the last slide the slider just scrolls to the left again to start over, as though it's an infinite loop. I want it to scroll back through all the slides and land on the first one again. Much like it does here (see the end of page: http://store.hogan.com/Hogan/IT/Traditional-20-15/p/HXM2540V600FMOG009 ). I used "jssor".com javascript to create it, taking carousel demo, and I can't add loop to the options, so I have to create another function but I don't know how to do it.

How can that be achieved?

Thank you, I'm new with this stuff.

This is my jsfiddle if it can help you, but it doesn't work cause I've some external source that doesn't recognize. I'm sorry for the length of HTML and CSS codes, I had to take it like that for job.

This is my JS.

jQuery(document).ready(function Slider($) {

        var numOfCols = 0;
        var slideWidth = 0;

        var bodyWidth = document.body.clientWidth;
        if (bodyWidth) {
            if (bodyWidth >= 770) {
                    numOfCols = 4;
                    slideWidth = 200;
                    console.log("desktop");
                }
                else if (bodyWidth >= 500) {
                    numOfCols = 2;
                    slideWidth = 230;
                    console.log("tablet");
                }
                else {
                    slideWidth = 285;
                    numOfCols = 1;
                    console.log("mobile");
                }
        }

        var jssor_1_options = {
          $AutoPlay: true,
          $AutoPlaySteps: 1,
          $SlideDuration: 500,
          $SlideWidth: slideWidth,
          $SlideSpacing: 3,
          $Cols: numOfCols,
          $PauseOnHover:0,
          $Loop: 2,
          $otpCenter: true
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);


        $("#right").click(function() {
            jssor_1_slider.$Next();
        })

        $("#left").click(function() {
            jssor_1_slider.$Prev();
        });
    });

Answer 1

Please set $Loop: 2 (rewind)

var jssor_1_options = {
  ...
  $Loop: 2,
  ...
};

Please check the Loop option here

• Options - Jssor Slider Maker
• Options - Development

Edit

I checked your code and jsfiddle . The loop works. The problem is that the width of 'outer container' and 'slides' container is unexpected. Please change width of the 2 containers then.

<div id="jssor_1" data-slide="0" style="position:relative;margin:0 auto;top:0px;left:0px;width:809px;height:350px;overflow:hidden;visibility:hidden;">
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:809px;height:350px;overflow:hidden;">

Change width of the 2 container in the following code,

    var bodyWidth = document.body.clientWidth;
    if (bodyWidth) {
        if (bodyWidth >= 770) {
            numOfCols = 4;
            slideWidth = 200;
            console.log("desktop");
        }
        else if (bodyWidth >= 500) {
            numOfCols = 2;
            slideWidth = 230;
            //width of the 2 containers should be 230 x 2 + 3 * 1 = 463
            console.log("tablet");
        }
        else {
            slideWidth = 285;
            numOfCols = 1;
            //width of the 2 containers should be 285
            console.log("mobile");
        }
    }