Carousel - disable swipe

Carousel - disable swipe

  

Hi everyone,


I am currently using the Carousel Silk UI widget with an input form inside it. However, when I try to select words in this input form, I end up swiping to the next element of the Carousel...

Thus, I was wondering if it was possible to disable completely the swipe functionality from the Carousel Silk UI Widget? If it is not possible, then is there a javascript trick to disable it inside a specific container (my form input)?


Thanks a lot!

Hi Kevin , if I understood you are talking about the Navigation feature of the widget. Have you tried to put the attribute value as false? 


Best Regards.

Hi Kevin,

Check here: https://www.outsystems.com/forums/discussion/26674/make-component-not-swipeable-carousel-tab/ maybe this give you a clue about it!

Hi Kevin,

This is possible. You have to use the 'DisableCarouselSwipe' client action from mobile patterns. Include it in dependencies if you haven't already.

Call the DisableCarouselSwipe client action in the OnReady event action of the screen and pass the Id of the carousel with it (you have to give the carousel a name in order to be able to do so).

That should do the trick. Let me know if you need more help.


Kind regards,

Sam

Thanks for the quick help!

I did not mention that I am working on a Web Application.


@Paulo,

Unfortunately, setting the Navigation feature to False only removes the right and left navigation arrows...


@Claudia,

I tried to embed my input form in a block with the onclick extended property set to "event.stopPropagation()", but that did not solve the issue.


Hi Kevin, I don't have time right now to go through the js and give you the js code but if you want to learn how to stop it I suggest you open the WebPatterns eSpace:

Right-click the Carousel webBlock and choose Open in WebPatterns espace


Then you can go through the Carousel WebBlock and check out its javascript, both the one that is executed in the block and the lib that is probably declared in the Advanced webBlock properties. After figuring out how it works, you can add your custom code to the onFocus event of the form you have on the carousel with a child selector like .YourDiv 'CarouselClass'.


Hope you can work it out yourself but if you can't i'll try to find it out for you :)

Hi Afonso, 

Thanks for your help! Looking at the javascript, I figured out I had to switch to false the variables touchDrag and mouseDrag. If that can help, I found two ways to do it :


  1. Clone the Carousel widget and modify in its javascript the following lines so that the Carousel directly starts with these options set to False
    $.fn.owlCarousel.options = {
        ...
        mouseDrag : false,
        touchDrag : false,
        ...
    };
  2. Dynamically change the parameters touchDrag and mouseDrag runnning this javascript script during preparation:
    $('.owl-carousel' ).data('owlCarousel').reinit({
        touchDrag  : false,
        mouseDrag  : false
    });

Glad you worked it out Kevin ;)