search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 603 forks source link

Adding boundary friction to stop the slides from stretching off the carousel edges #1174

Closed nafis25 closed 1 year ago

nafis25 commented 3 years ago

Hey there! First off, thanks so much for this awesome slider, the physics based animations really takes the cake!

I was thinking if it was possible to add some resistance/friction to the first and the last slides of the carousel (slide[0] and slide[-1]) on to prevent the user from over-swiping. Currently, the first and last slides can be dragged for as long as the flickity viewport div can stretch, I tried to illustrate what I mean with the help of the pictures attached.

normal streched

To further explain this feature request, the best example I can come up with is the resistance and resistanceRatio parameter Swiper uses for their slides here.

I hope I was able to articulate this feature request properly, fingers crossed for this to make it into production. Thanks again!

desandro commented 2 years ago

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

Yup, this is how Flickity was designed. It's boundary physics is fairly simple - move the slider at half-rate compared to dragging. See dragMove in drag.js

  if ( !this.options.wrapAround && this.slides.length ) {
    // slow drag
    var originBound = Math.max( -this.slides[0].target, this.dragStartPosition );
    dragX = dragX > originBound ? ( dragX + originBound ) * 0.5 : dragX;
    var endBound = Math.min( -this.getLastSlide().target, this.dragStartPosition );
    dragX = dragX < endBound ? ( dragX + endBound ) * 0.5 : dragX;
  }

The 0.5 is the rate.

This feature-enhancement doesn't feel popular enough for master branch. But let me know where you take it.

desandro commented 1 year ago

Sorry, this request didn't get much love