Unable to scroll through Slick-slider on mobile devices

Recently, I have been heavily involved in modifying a Wordpress theme called Bronx Drag & Drop. This particular theme was chosen because the client wanted the ability to make adjustments on their own.

The Slick Slider feature, which is a horizontal image carousel visible only on mobile devices, is causing an issue where users are unable to scroll down below the images as it requires horizontal swipes to navigate through the pictures.

I have spent more than 2 hours trying to resolve this problem without success. Any assistance or suggestions would be greatly appreciated!

htmlcsswordpress

Answer №1

After encountering the same issue, I was able to resolve it by including the following code in my CSS:

.slick-slider {
touch-action: auto;
-ms-touch-action: auto;
}

If you want more information about this problem, you can visit: https://github.com/kenwheeler/slick/issues/449

Answer №2

I struggled with touch-action not functioning properly. Eventually, I had to display arrows on mobile and disable touchMove.

arrows: true,
touchMove: false

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

Styling with CSS using the em unit to make an image half the size of its parent div element

I'm struggling with resizing an image within a div using the em size unit. I want the image to be half the size of its parent div, so I set both the width and height CSS properties of the image to 0.5em. However, when looking at the code below, you c ...

htmlcssfont-size

Hide the collapsible TR using Jquery

I need help with using collapsible rows. I found a link that shows how to implement it, but I am struggling to keep the child rows hidden until someone clicks on the parent row. I attempted the following: https://jsfiddle.net/p9mtqhm7/52/. <script> ...

htmljqueryarrays

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Recently, I embarked on a journey to learn the MEAN stack and decided to challenge myself by building an authentication page from scratch instead of using the out-of-the-box solution. My main struggle lies in updating texts on my navbar. Here's a snip ...

javascripthtmlangularjstwitter-bootstrapmean-stack

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

Currently, I am working on creating a basic jquery gallery viewer. In my code, I have the following structure: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <i ...

javascriptjqueryhtmlcss

Stacking elements using the relative position property

One challenge I am currently facing involves stacking divs designed to resemble sticky notes in such a way that the bottom part of each div extends out. To achieve this, my initial thought was to style the topmost div conventionally and only apply styli ...

htmlcss

What is the best way to align a tweet in the middle of

When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) & ...

htmlcsstweets

Is there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...

javascripthtmlcsssvg

Centering a form on a webpage with Bootstrap: A step-by-step guide

Utilizing twitter-bootstrap for styling, I have implemented a login form and am attempting to center it on the page. Most suggestions on stackoverflow advise placing elements inside the container class, which is what I have done. The requirement is for t ...

csstwitter-bootstrap-3

Ways to conceal text that is not wrapped in an HTML tag

<div class="padd10_m"> <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.pn ...

javascripthtmlcsswordpress

Mobile responsiveness issues with Bootstrap 4 row

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS ...

cssbootstrap-4media-queries

Creating a chic look for your conditional statement: If Else Styling

While it may not be possible to directly style PHP code, you can definitely style the HTML output that PHP generates. I'm curious if there's a way for me to apply styles to the output of an IF ELSE statement. if ($result != false) { print "Y ...

phphtmlcss

Revitalize your PHP skills by incorporating JavaScript

Looking for a script that will automatically refresh specific functions every 30 seconds along with a visible timer. Here is what I have so far: $ping, $ms window.onload=function(){ var timer = { interval: null, seconds: 30, sta ...

phpjavascripthtmlrefresh

Transforming a two-digit year into a four-digit year

Our entry form provides users with a calendar drop-down option, but they are also able to manually type in dates. We recently discovered that if someone enters a 2-digit year, it automatically changes to 1912 instead of 2012 (as dates cannot be in the past ...

javascriptjqueryhtmlasp.net-mvc

My objective is to show unique items in a list and eliminate any duplicates

I am looking for a way to display items in a list only once if they are repeated, and remove any items that are not repeated. What is the best approach to achieve this? Take into consideration the following function: { alert("Hello"); var sympto ...

javascriptjqueryhtmlcsscordova

Button on aspx page not functioning properly when clicked

I seem to be experiencing an issue with buttons. To check if the function is being triggered, I used alert("") and found that it does enter the function when the button is clicked. However, after the alert, any other code inside the function seems to not w ...

javascripthtmlasp.net

Using ng-keypress in AngularJS to trigger a function

I have a send button and when I click on it, I want to send the text from an input field. Additionally, I want the text to be sent when the 'enter' key is pressed on the keyboard. I have tried two different solutions but nothing seems to work. B ...

javascripthtmlangularjsdom-eventsevent-driven

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Hey there everyone!, I am currently working on a project in Wordpress and I was wondering if anyone has experience creating a floating widget that moves along with the page as you scroll. Any suggestions on how to achieve this? Would it involve using Javas ...

javascriptjquerycsswordpresswidget

Center aligning elements in React using CSS with HTML can be achieved through Flexbox. However, sometimes images

Currently, I'm in the process of developing a website with react and I've encountered an issue with centering elements vertically on the left and right sides. It's been troubling me for a few days now and I haven't found a solution yet. ...

htmlcssreactjsflexbox

Positioning two images alongside text

I am trying to position two images at the top of my website so that they align correctly with the text next to them. However, I've encountered a few challenges: 1) The text doesn't have any spacing between the images. 2) The text varies in le ...

htmlcss

I'm having trouble locating the HTML link in my text

I've recently started coding and I'm facing an issue. I can't seem to figure out why a link named "Food Taxi" isn't showing up. I added an href tag, but it's still not linking properly. I've tried moving some code around witho ...

htmlcss