停止在光滑的旋转木马中拖动

Question

我正在开发一个小项目，我正在使用光滑的旋转木马。问题是我想在第一个和最后一个元素的情况下停止拖动。知道怎么做吗？

如果是第一个和最后一个元素，如何停止拖动？

var readyToDrag = true;
        jQuery('.responsive').slick({
            dots: false,
            infinite: false,
            speed: 300,
            slidesToShow: 1,
            slidesToScroll: 1,
            draggable: true,
            onBeforeChange: function(event, slick, currentSlide, nextSlide){
                if(event.currentSlide == 3){
                    readyToDrag = false;
                    alert(readyToDrag);
                }
            },

            draggable: readyToDrag,
            responsive: [{
                breakpoint: 1000,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    infinite: false,
                    dots: false
                }
            }, {
                breakpoint: 999,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    infinite: false
                }
            }, {
                breakpoint: 767,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    infinite: false,

                    draggable: readyToDrag,

                }
            }]
        });

Answer 1

看起来我迟到了; P
这是我未来访问者的解决方案，请查看JSFiddle。

它是如何工作的？

一些观察

1. 通过更改（和动画）transform css属性
来实现Slick的拖动工作
2. 属性值必须始终为0 <= value <= ($containerWidth - $trackwidth)，其中 $ containerWidth 是包含可见幻灯片和 $ trackWidth 是包含所有幻灯片的元素的宽度。
3. 如果值为> 0，则会出现左侧过度滚动，如果为> ($containerWidth - $trackwidth)则会出现右侧过度滚动
4. 价值变化被指定为x-axis转化中translate3d()的值。

阻止转型发生：
此解决方案的关键是拦截和阻止（如有必要）要应用于光滑元素的转换。
要做到这一点，我做的是

1. 修补jQuery的css()方法来拦截调用并检查transform css属性
2. 如果找到，则触发自定义事件并将变换调用委托给它。处理程序将决定是否允许转换。
3. 在处理程序内部，只需检查此情况 0 <= value <= ($containerWidth - $trackwidth)为真，允许转型。

拦截器：

(function($) {
    // use regex to extract x-translation value
  var reg = /-?\d+/g;

  $.fn.css = (function(orig) {
    return function CSSTranslateListener() {
      var isTranslate = !!arguments[0]['transform']
      if (!isTranslate) {
        // apply regular changes
        orig.apply(this, arguments);
      } else {
        // is a translate event!
        // trigger an event with a pseudo-resolve that we can call
        // if we want the translation to happen and a the tranlation value
        // debugger;
        var evt = new $.Event("slickEdgeTrigger");
        var args = [].slice.call(arguments);
        var resolver = orig.bind.apply(orig, [].concat([this], args))
        $(this).trigger(evt, [resolver, +args[0]['transform'].match(reg)[1]])
      }
    }
  })($.fn.css)
})(jQuery)

处理程序：

// $w is the width of container (see https://jsfiddle.net/boka8yrj)
$('.carousel').on('slickEdgeTrigger', function(evt, fn, by) {
    if(by >= ($w - $('.slick-track').width()) && by <= 0){
        fn()
    }
  })
});

警告：

1. 将拦截所有变换呼叫，而不仅仅是Slick的呼叫
2. 对于$(...).css()
过多调用的较大幻灯片或网页，效果可能会出现问题

还有其他办法吗？
好吧，Slick是一个开源项目，因此您可以随时下载副本并对其进行修改以满足您的需求。要实现上述行为，您可以在this point添加拦截和处理程序逻辑。这是计算变换值的地方，所以你只需要在this函数内检查上面提到的条件，如果条件为假，则提前返回。