58701

Disable Touch on Materialize Carousel

Question:

It looks like no one has asked this question before since I've pretty much scoured the internet looking for a very simple answer.

How would one go about disabling the ability to swipe left/right on the materialize carousel?

Answer1:

in Materialize.js add/edit:

var allowCarouselDrag = true; value: function _handleCarouselDrag(e) { if(allowCarouselDrag){ .... } }

You can set the allowCarouselDrag variable per application.

Answer2:

This is far from a perfect solution, and it might disable too much of the functionality in your case, I'm not sure. An option to turn this on/off would be much appreciated.

But for my needs, turning off the events on the carousel did the job:

var carousel = $('.carousel.carousel-slider').carousel(); // Disable all swipping on carousel if (typeof window.ontouchstart !== 'undefined') { carousel.off('touchstart.carousel'); } carousel.off('mousedown.carousel');

Answer3:

function tap(e) { pressed = true; dragged = false; vertical_dragged = true; reference = xpos(e); referenceY = ypos(e); velocity = amplitude = 0; frame = offset; timestamp = Date.now(); clearInterval(ticker); ticker = setInterval(track, 100); }

Answer4:

I have attempted to solve this problem for the past ~three days and have come to the conclusion that there is no clean solution other than directly editing the materialize.js file as in Lester's answer. Unfortunately, this is not an ideal solution as it causes issues when updating Materialize etc. <br /> The simplest solution that I have come up with after this time is the following piece of javascript:

window.onload = function() { window.mouseDownNow = false; // The selector below must be more specific than .carousel.carousel-slider in // order for the event to be cancelled properly. $('.class-added-to-block-swiping-functionality') .mousedown(function() { window.mouseDownNow = true; }) .mousemove(function(event) { if(window.mouseDownNow) { event.stopPropagation(); } }) .mouseup(function() { window.mouseDownNow = false; }); };

This will simply stop the event from bubbling to the Materialize swiping functionality. <br /><strong>Note:</strong> I am not sure how specific the selector must be, mine were classes that were specific to text areas.

Recommend

  • Why isn't it possible to use backslashes in f-strings?
  • How to purge old content in firebase realtime database
  • How to get the new coordinates from Angular Google Maps? (Angular 6)
  • Longest Increasing Subsequence, Dynamic Programing
  • How to pass a validator to the `TextFormField' in Flutter?
  • UI Application not loading PyQt5
  • Python multiprocessing: can I reuse processes (already parallelized functions) with updated global v
  • UITableView not scrollable but enough height
  • Access IPV6 with IPV4 [closed]
  • This thread program shows me different answers every time
  • Sphinx4 ConfidenceResult and SpeechResult
  • How to remove item from Panel
  • Codenameone native maps offline?
  • How to store files with JS?
  • Using Facebook Graph API with ASP.NET
  • How to use template selector within a ContentPresenter in Windows 8.1
  • Get max bookings count in range
  • Azure NodeJS Error: ENOENT, open 'D:\\home\\site\\wwwroot\\bin\\views\\'
  • Eric5: The OK button of 'new project' dialog is disable
  • Javascript / jQuery not executing in IE until the body of the page is moused over
  • Opening tel: links from UIWebView
  • Remove stopwords and tolower function slow on a Corpus in R
  • characters not allowed in DOM ids by spec, and by browser
  • Loading hyperspectral images in Octave
  • How to convert days into months using datetime in Python3?
  • Protractor Page objects - TypeError: Object # has no method 'methodName'
  • MayAVI install on Python 3.6 [duplicate]
  • Facebook friend list in Facebook Android SDK 3.14
  • How can I filter an array of dictionaries in 'updateSearchResultsForSearchController' to s
  • System.Drawing.DrawString() weird wrapping of long string
  • Unable to run testNG tests from maven
  • JQuery Mobile Ajax Navigation in Single-Page Template
  • How to add html image in to velocity template file to send email?
  • Keep rows with certain values always at the bottom while sorting in jquery tablesorter plugin
  • Debugging php script timeout?
  • How to use Flask's render_template from an ajax POST form submit
  • How to merge objects within array based on attribute
  • concise way of flattening multiindex columns
  • r - input value by user to dataframe via shiny