jquery之停止在光滑的轮播中拖动

我正在开发一个小项目，其中使用了光滑的轮播。问题是我想在第一个和最后一个元素的情况下停止拖动。知道如何做到这一点吗？

如何在第一个和最后一个元素的情况下停止拖动？

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, 
 
                } 
            }] 
        }); 

请您参考如下方法:

看来我参加聚会迟到了；P
这是我为 future 访客提供的解决方案，请在 JSFiddle 上查看。 。

它是如何工作的？

一些观察

1. Slick 的拖动工作是通过更改(和动画)transform 来实现的。 CSS 属性
2. 属性值必须始终为 0 <= value <= ($containerWidth - $trackwidth)其中，$containerWidth 是包含可见幻灯片 的元素的宽度，$trackWidth 是包含所有幻灯片的元素的宽度。
3. 如果值为 > 0然后有一个左翻页，如果是> ($containerWidth - $trackwidth)然后是向右滚动
4. 值的更改被指定为 x-axis 的值在translate3d()转型。

阻止转变发生:
此解决方案的关键是拦截并防止(如有必要)将转换应用于slick元素。
为此，我所做的是

1. 修补 jQuery 的 css()拦截调用并检查 transform 的方法CSS 属性
2. 如果找到，则触发自定义事件并将转换调用委托(delegate)给它。处理程序将决定是否允许转换。
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 中提到的条件即可。函数并在条件为 false 时提前返回。