Nested Sliders

[jrussnone]

I'm trying to implement nested sliders, however I'm having the issue where the controls for the parent and child sliders are affecting each other. I can see that this issue is due how the Controls component is searching for the control elements, however I'm not too sure how to best approach this.

Is it possible to overwrite the control elements for a slider, or will I need to overwrite the component mount functions to have a more specific selector for the controls?

[pkjindal111]

I'm also having the same problem, any solution?

[xfra35]

Same problem here.

I've partially fixed it here => https://github.com/xfra35/glide/commit/9b52b374fb49ebeb0c7a502b93eb0d256b78ba08

I don't open a PR as it's a partial fix only: it fixes interferences between nav/arrow controls but not swipe interferences.

As a quick workaround, I've disabled swipe on nested sliders by setting swipeThreshold and dragThreshold to 0.

If you need the patched 3.3.0 compiled version (as I did), it's there => https://github.com/xfra35/glide/commit/4d4b9cedb66aa05739ba7c19d7a50623df1b736c

[Manours]

Hi there 👋

I'm having the same issue. I've made a pen to show what's going on with controls : https://codepen.io/manueltaraud/pen/abZNWBw

To resolve it, I thought to leave the possibility of changing the selector of the track or controls. data-card-el="track" instead of data-glide-el="track" and an option glideSelector: '[data-card-el]'.

[Sorrow81]

Hi, I love your plugin.

I have been looking for a similar plugin for Vue3 for a few days now and I must admit it was a relief when I found yours. However after trying several ways to nest a glide, I found this issue.

Is it possible to add this feature @jedrzejchalubek ?

Thanks a lot !

[drashtibpatel]

Same problem here.

I've partially fixed it here => xfra35@9b52b37

I don't open a PR as it's a partial fix only: it fixes interferences between nav/arrow controls but not swipe interferences.

As a quick workaround, I've disabled swipe on nested sliders by setting swipeThreshold and dragThreshold to 0.

If you need the patched 3.3.0 compiled version (as I did), it's there => xfra35@4d4b9ce

How can we fix in case of using in React project? Where do we need to set this code? What if some one update the package?

[dlopez-akalam]

I'm having the same issue.

[dlopez-akalam]

I can confirm that the fix described in https://github.com/glidejs/glide/issues/365#issuecomment-562278037 fixed the issue for me. Would be nice to see this fix in the main repository.

[karthik2706]

Fixed this in usage of the plugin itself. Here is the example - https://github.com/karthik2706/glide-nested-carousel

//Disable parent slider when child arrows are clicked
glide.on('move', function() {
    outerGlide.disable();
    console.log('outer disabled')
});
//Enable parent slider after child slide move is completed
glide.on('move.after', function() {
    outerGlide.enable();
    console.log('outer mounted')
})