darsain / sly

JavaScript library for one-directional scrolling with item based navigation support.
http://darsa.in/sly
2.87k stars 497 forks source link

Slide one by one #235

Open nithiz opened 8 years ago

nithiz commented 8 years ago

Hey man, good job on sly :) I've been using it for a while now.

All i'm missing in sly is the ability to force only one item to slide at every swipe. My usecase is a coverflow carousel where my items are really close to eachother (min margins). This makes a slide very hard to "activate" since i basicly slide 2 or 3 items every time. I was hoping i could get a config named slideByMax which would accept a max number of "slides to slide". In my case: slideByMax: 1.

vdite commented 8 years ago

Same Here! Would be very very fine, if you 'll make it possible!

mpavel commented 8 years ago

+1

Edit: I love sly, it's such a great tool! For this very particular use case however (force slide one by one), I couldn't adapt sly to work for what I needed. In my searching I came across "slick", a somewhat similar plugin that has the touch/drag functionality on one-by-one basis. I thought posting here will help others looking for this functionality. http://kenwheeler.github.io/slick/

ghost commented 8 years ago

I would love this feature as well.

edvjur commented 8 years ago

+1

StarpTech commented 8 years ago

We could introduce the property "slidebyone" to limit it. The relevant section is https://github.com/darsain/sly/blob/master/src/sly.js#L1474

StarpTech commented 8 years ago

Hi, you can implement the one by one behaviour with this modification. Replace the line https://github.com/darsain/sly/blob/master/src/sly.js#L1474 with this snippet.

      if(o.slidebyone) {

        if (dragging.delta < 0) {

          var nextItem = items[rel.activeItem + 1];

          if (Math.abs(dragging.delta) >= nextItem.size) {
            dragging.delta = -nextItem.size;
          }

        }
        else {

          var prevItem = items[rel.activeItem - 1];

          if (Math.abs(dragging.delta) >= prevItem.size) {
            dragging.delta = prevItem.size;
          }

        }
      }

      slideTo(dragging.slidee ? round(dragging.initPos - dragging.delta) : handleToSlidee(dragging.initPos + dragging.delta));

Add this to sly defaults:

slidebyone: true, //Move only one item per slide
edvjur commented 8 years ago

Thanks, @StarpTech! It looks like it is working flawlessly in my case. Would you mind making a pull request?

P. S. I suggest calling the option "slideByOne". And clean up the code a bit.

StarpTech commented 8 years ago

Hi @ejurgelionis the last commit is one year old and three PR are still open. As long as the maintainer doesn't shows some activity I don't investigate time to make a PR. I recommend to looking for a new maintainer. Thank you.