Is there a prop to disable the dragging functionality?

[allan-walker]

Great work on this awesome framework!

I am using this as a way to navigate between slides, and I've built a full-screen toggle so that you can open a slide in full screen. I want the drag functionality to be disabled in this mode and then renabled when I go back to the carousel view.

Is this something I'd need to code from scratch or is there a disabled={true} prop, or similar? I wasn't sure if this is one of the advanced features alluded to in the docs?

[xiaody]

There is no such prop, but you can code it easily.

Just maintain a flag say disableDrag in your component. And when it's true, drop the onTouchStart(and onMouseDown if you are using the touchWithMouseHOC) prop passing to your CarouselContainer.

I made a demo based on the "boring" example in repo, https://stackblitz.com/edit/react-touch-carousel-22?embed=1&file=index.js

[allan-walker]

@xiaody thanks so much for that!

Knowing that adding a prop to makes that available to is useful. This works great.

I just have another question, maybe this should be a separate issue, but I just just hoping you could help give me some background on the inner workings of this framework so I can help to solve a re-mounting issue I've got.

I've forked your example on stackblitz and updated with my source files - https://stackblitz.com/edit/react-touch-carousel-22-ybjh3a

Click the "play" button on any item to toggle fullscreen mode.

When my Carousel is in full screen mode (and disabled, using state as per your suggestion above), the videos and images don't smoothly transition between the the normal and full-screen states and a flicker is seen while the component is re-mounted. (You can see in the console that the <Scene component is mounted each time the carousel changed from cinema-mode {full screen} to track-mode {normal})

I was hoping you might have an idea of why a remount is happening here and if there was anything I can do to help prevent it?

Thanks in advance

[xiaody]

I see in your Track#render() method, you are constantly re-creating your carousel container. So every time you change your Track's state and trigger a render, it uses a new container and the new container re-mount the Scenes inside it.

Moving the const Container = into Track#constructor() as this.Container = and use this.Container in render should solve it.

[allan-walker]

Ah you are a star, thank you. I was using the pattern you had used here so that I could use the state value inside the carouselContainer method - but I should've noticed that I was redefining the Container on every render.

I have updated the stackblitz codebase and it works perfectly.

Thank you so much for your guidance on this ⭐️⭐️⭐️⭐️⭐️