Stop drag and drop into a smooth carousel

Question

I am working on a small project in which I use a smooth carousel. The problem is that I want to stop dragging in the case of the first and last item. Any ideas how to do this?

How to stop drag and drop in case of the first and last item?

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

Looks like I'm late for the party; Here is my solution for future visitors, check it out on JSFiddle .

How it works?

Some observations

• Slip effect by modifying (and animating) the transform css property
• The property value should always be 0 <= value <= ($containerWidth - $trackwidth) , where $ containerWidth is the width of the element containing the visible slides, and $ trackWidth is the width of the element containing all the slides.
• If the value is > 0 , that is, scroll left and if it is > ($containerWidth - $trackwidth) , then there is a right-overscroll
• The change in value is assigned as the x-axis value in the translate3d() transform.

Termination of Transformation:
The key to this solution is to intercept and prevent (if necessary) the transformation, which should be applied to the slip element.
To do this, I did

• Patch jQuery css() method for intercepting calls and checking for transform css property
• If found, then trigger a custom event and delegate a conversion call to it. The handler will decide whether or not to allow the conversion.
• Inside the handler, just check this condition
  0 <= value <= ($containerWidth - $trackwidth) to be true and enable conversion.

Interceptor:

 (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) 

Handler:

 // $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() } }) }); 

Cautions:

• Intercepts all transformation calls, not just Slick call
• Performance can be a problem for large slides or pages with too many calls on $(...).css()

Is there another way?
Well, Slick is an open source project, so you can always download a copy and modify it to suit your needs. To achieve the above, you can add the interception logic and the handler to this item . The values ​​for the conversion are calculated here, so you just need to check the condition that I mentioned above in this function and return the earlier if the condition is false.