ciampo / macro-carousel

Carousel as a Vanilla Web Component.
https://ciampo.github.io/macro-carousel/demo/
MIT License
77 stars 6 forks source link

Scrolling content #36

Closed ctpresales closed 6 years ago

ctpresales commented 6 years ago

Hi,

First just wanted to say I love your component and really want to use it in a project.

I'm having an issue combining it with scrolling content though. I have div component holding a timeline. It is set to overflow-y:scroll but it almost impossible to scroll the content without activating the slide.

Can this be done at present?

Thanks,

David

ctpresales commented 6 years ago

I think I got the behaviour I was looking for. I checked the x movement within _onPointerMove and I only call this._requestDragTick() if it was significant enough that the user was obviously not just scrolling through content on the current slide.

ciampo commented 6 years ago

Hey @ctpresales , it looks like you already found where to look in the code.

At the moment, x-slider is not production ready yet (I need to handle a couple of edge cases/bugs, write tests for them, and have a final round of QA).

Until that time, I don't think I'll publish it on the npm registry, but please if you have time have a go with it and let me know about your feedback (including docs, bugs or feature requests)

For example, if you find that the way the vertical scroll is cancelled, let me know about what would be a better value for it, and I'll have a look.

This is the way it's achieved at the moment:

// inside _onPointerMove()
      // Prevent default only if dragging horizontally.
      if (Math.abs(this._pointerCurrentX - this._pointerFirstX) >
          Math.abs(this._pointerCurrentY - this._pointerFirstY)) {
        e.event.preventDefault();
      }