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

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

阻止转换发生：
此解决方案的关键是拦截并防止（如果需要）将转换应用于光滑元素。
为了做到这一点，我所做的是

1. 修补 jQuery 的css()方法来拦截调用并检查transformcss 属性
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是一个开源项目，因此您始终可以下载一个副本并对其进行修改以满足您的需求。要实现上述行为，您可以在此时添加拦截和处理程序逻辑。这是计算转换值的地方，因此您只需检查我上面在该函数中提到的条件，并在条件为假时提前返回。