Question

默认情况下，当它位于最后一张幻灯片上时，滑块会再次向左滚动以重新开始，就像它是一个无限循环一样。我想让它滚动回所有幻灯片并再次登陆第一张幻灯片。就像它在这里一样（参见页面末尾：http://store.hogan.com/Hogan/IT/Traditional-20-15/p/HXM2540V600FMOG009）。我使用“jssor”.com javascript创建它，进行轮播演示，我不能为选项添加循环，所以我必须创建另一个函数，但我不知道该怎么做。

如何实现？

谢谢，我对这些东西很新。

这是我的jsfiddle，如果它可以帮助你，但它不起作用，因为我有一些无法识别的外部来源。我很抱歉HTML和CSS代码的长度，我不得不把它当作工作。

这是我的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

请设置$ Loop：2（倒带）

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

请在此处查看循环选项

修改

我检查了您的代码并jsfiddle。循环工作。问题是'外部容器'和“幻灯片”容器的宽度是意外的。请改变2个容器的宽度。

<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;">

在以下代码中更改2容器的宽度，

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"); } }

jQuery滑块最后一次转换

1 个答案: