Autoplay on Slick Slider pauses upon touch interaction on mobile and tablet devices

Hi there, I am facing an issue that I could use some help with.

The problem pertains to the Slick Slider

I have configured a slider to autoplay, with pauseOnHover and pauseOnFocus both set to false.

Below is the code snippet:

$('.cc-slider-container').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay:true,
autoplaySpeed:5000,
pauseOnHover:false,
pauseOnFocus:false
});

This setup performs as expected on desktop where autoplay continues even when hovered over. However, on mobile devices (android) and iPad, if I touch the slider to scroll the page, the autoplay stops and does not resume.

Any suggestions or advice would be greatly appreciated!

I am using slick version 1.8.0,

Thank you in advance!

javascriptandroidiosslick.js

Answer №1

To restart the autoplay function, I utilize the 'slickPlay' method in this code snippet:

$('.cc-slider-container').on('touchstart', e => {
  $('.cc-slider-container').slick('slickPlay');
});

Answer №2

Dealing with a comparable problem, I found a solution by including:

.cc-slider-container { pointer-events: none; }

in the CSS file.

Hopefully this tip proves useful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trying to call the virtual function 'void android.widget.ListView.setAdapter'

I'm currently working on creating a list view that includes images and text within a fragment that is placed on a viewpager with tabs. This setup allows me to swipe left or right to navigate between different fragments. As someone who is relatively n ...

androidandroid-fragments

Display a "Loading" image in the gallery before anything else loads

Can a animated loading gif be implemented to load before the gallery images, or would it serve no purpose? The image will be loaded as a background using CSS. <link rel="stylesheet" href="loading.gif" /> Appreciate your help! ...

javascriptjqueryhtmlcss

After removing a 3D object from the array, THREE.js becomes unresponsive

I am currently developing an online real-time game that involves storing all players and their animation mixers in arrays. However, I have encountered an issue when a player leaves the game. Whenever I attempt to splice them from the player array, the prog ...

javascriptarraysthree.js

Publishing a class for an open source project, such as on NPM, involves a few key steps in

After developing a JavaScript Class, I am interested in sharing it with the open-source community. This will serve as a reference for me in the future and allow others to utilize the functions within the class by creating objects (e.g. through NPM). How ...

javascriptnode.jsnpm

What is the reason for MongoDB throwing an error when an array of objects is treated as a string?

I'm finding myself quite puzzled by the error I'm encountering, as it appears to be very similar to me. When running a Mongoose Seed, the model structure looks like this: User Model const mongoose = require("mongoose") const Schema = mongoose. ...

javascriptnode.jsmongodbmongoose

Attempting to implement a feature that will enable a blank row at the end of an input table with the help of

I'm currently working on a form that allows users to click a button to add a blank row to the bottom of a table. The issue I'm facing is that when I click the button, it redirects back to my index.php page instead of simply adding the row to the ...

javascripthtml

Convert an array to a string in ES6 without using commas

Is there a way to transform a list of errors into a tooltip-friendly format without adding commas between each item? The list is being displayed with an unwanted comma after every li element. I suspect this issue arises from the use of errors.map(error =& ...

javascriptarraysecmascript-6

Pass the identical event to multiple functions in Angular 2

On my homepage, there is a search form with an input box and select dropdown for users to search for other users by location or using html5 geolocation. When a user visits the page for the first time, they are prompted to allow the app to access their loca ...

javascripthtmlangularangular2-formsangular4-forms

Invisibility of form data on new page - PHP and Javascript

I have a webpage with multiple hyperlinks. Each hyperlink should redirect the user to a new page with the URL sent as POST data. What I can do: 1. Open the new page successfully. The issue I'm facing: 1. On the new page, I cannot access the URL ...

javascriptphpjqueryhtmlajax

How can I conceal the _id field in this MongoDB query?

Is there a way to exclude the _id field from this query using express and node.js? I have created an API with this query, but I need to hide the _id field. Here is the query : router.get("/", (req, res) => { VerbsDE.find({}, { _id: 0 }) .limit( ...

javascriptnode.jsmongodbmongoose

I need to confirm the validity of minDate and maxDate in a ReactJS component, ensuring that maxDate is always at least 5 years after min

start from today and select a date end 5 years from the starting date I haven't attempted anything yet. Seeking help for a solution. ...

javascriptreactjsnext.js

Stopping the camera feed in iOS using AVCapture

My application has a feature where it takes a picture using CIDetect for face detection and uploads it to a server for processing. However, I want to temporarily pause the camera video feed during this process to prevent it from capturing additional pictur ...

iosavcapture

The fetch months feature does not seem to be functional on iPad devices

My goal is to display months and days on the iPad, but I'm encountering some issues: When showing months, it unexpectedly shows undefined; For displaying days, it displays either null or nan. Javascript Code: for (var x = 0; x < parsed.length ...

javascriptiosipad

The contents of the div disappear when using jQuery to extract it from a string

Update: I finally uncovered the reason behind the empty content of the #output div. The content is fetched from the server, which takes some time; by the time the document loads, the div remains empty. Does anyone have suggestions on how to extract infor ...

javascriptjqueryquery-string

Learn the technique of storing a sequence of functions within a variable using jQuery

For instance, I am looking to assign a sequential process to multiple variables and utilize them in various scenarios. var disable_btn = true; var button_me = $('#contents.getsamplekit .sample-form .form #submit-btn-freeSample-me'); var button_d ...

javascriptjqueryfunctionvariableschaining

"Creating a Sleek Design: How Bootstrap 4 Tabs Use Fade Effect to Optimize Space for Multiple

In my Rails 5.2 application, I have implemented tabs using Bootstrap 4 as follows: <div class="classic-tabs mx-2 mb-5"> <ul class="nav" id="myClassicTabShadow" role="tablist"> <li class="nav-item"> <a class="nav-link wav ...

javascriptbootstrap-4ruby-on-rails-5

Issue with Firefox compatibility with Bootstrap Modal functionality

While building my website using bootstrap, I encountered a strange issue. When I click on a button that contains the following code: <form action="javascript:$('#modal .modalbody').load('/controllers/forums/create_topic_modal.php?id=&apo ...

javascriptphpjqueryhtmltwitter-bootstrap

JavaScript on Event

My task is to develop a landing page that requires users to input a promotion code in order to proceed. There are three possible scenarios: the user enters the correct code and is redirected to another page, the user enters the wrong code and is taken to a ...

javascriptjqueryfunctioncall

How to handle drop down values with question marks in AngularJS?

Here is the html and js code I am using for the angularjs dropdown. JavaScript code: $scope.yearValues=[ { label : "Year 1 - 1/17 - 6/17", code : "Year 1 - 1/17 - 6/17" }, { label : "Year 2 - 6/17 - 9/18", cod ...

javascriptangularjs

Why does the xmlParser crash in iOS8, but function perfectly in iOS 7?

When running on a simulator, using [xmlParser parse] may cause a crash in iOS 8 but works fine in iOS 7. I have not been able to identify any differences between iOS 7 and iOS 8 regarding NSXMLParser. The code snippet that is causing the issue: NSData *d ...

iosparsingcrash