Revolution Slider Not Sliding on Mobile – Mobile Touch Swipe Not Working
Experiencing issues with your Revolution slider not sliding on mobile devices? The culprit is likely due to hyperlinked slides, which can interfere with the touch swipe functionality. Fear not, we've got the solution to get your slider back in action!
Why Hyperlinked Slides Cause Issues
The Revolution slider is a powerful tool for creating dynamic and engaging content on your website. However, when you have hyperlinked slides, the slider's touch swipe functionality can become compromised. This is because the slider is interpreting the touch gestures as clicks on the linked slides, rather than recognizing them as swipe actions.
When a user tries to swipe the slides, the slider may not respond as expected, and instead, the user is redirected to the linked URL. This can be frustrating for your visitors and negatively impact the user experience on your website.
The Solution: Custom JavaScript to the Rescue
To solve this issue, we'll need to implement a custom JavaScript solution that separates the touch swipe functionality from the slide links. This will allow users to smoothly navigate through your slider using touch gestures, without accidentally triggering the slide links.
Here's the code you need to copy and paste into the "Custom JavaScript" section of your Revolution slider settings:
(function() {
if(!('ontouchend' in document)) return;
var pageX, pageY, newX, newY, linked;
jQuery('.rev_slider').on('touchstart', function(event) {
newX = newY = false;
var target = jQuery(event.target),
clas = target.attr('class');
event = event.originalEvent;
if(event.touches) event = event.touches[0];
pageX = event.pageX;
pageY = event.pageY;
if(target.is('a') || target.closest('a').length) linked = target;
}).on('touchmove', function(event) {
event = event.originalEvent;
if(event.touches) event = event.touches[0];
newX = event.pageX;
newY = event.pageY;
if(Math.abs(pageX - newX) > 10) event.preventDefault();
}).on('touchend', function(event) {
if(newX !== false && Math.abs(pageX - newX) > 30) {
eval('revapi' + jQuery(this).closest('.rev_slider_wrapper').attr('id').split('rev_slider_')[1].split('_')[0])[pageX > newX ? 'revnext' : 'revprev']();
}
else if((linked && newY === false) || (linked && Math.abs(pageY - newY) < 10)) {
linked = linked.is('a') ? linked : linked.closest('a');
if(linked.length) {
if(linked.attr('target') === '_blank') {
window.open(linked.attr('href'));
}
else {
window.location = linked.attr('href');
}
}
}
linked = newX = false;
});
})();
This code separates the touch swipe functionality from the slide links, ensuring that users can navigate through your slider using touch gestures without triggering the slide links. It also handles the scenario where a user clicks on a slide link, ensuring that the link is correctly followed.
How It Works
Let's break down the code to understand how it works:
-
The code checks if the device supports touch events using the 'ontouchend' in document
condition. If the device doesn't support touch events, the code exits.
-
The code sets up event listeners for touchstart
, touchmove
, and touchend
on the .rev_slider
elements.
-
On touchstart
, the code stores the initial touch position (pageX
and pageY
) and checks if the touch target is a link (target.is('a') || target.closest('a').length
). If it is, the code stores the link element in the linked
variable.
-
On touchmove
, the code updates the newX
and newY
variables with the current touch position. If the horizontal distance between the initial and current touch position is greater than 10 pixels, the code calls event.preventDefault()
to prevent the default link behavior.
-
On touchend
, the code checks if the horizontal distance between the initial and final touch position is greater than 30 pixels. If so, it triggers the "next" or "previous" slide action using the revapi
function.
-
If the touch event didn't result in a swipe (i.e., the horizontal distance is less than 30 pixels), the code checks if the touch target was a link. If so, it follows the link by either opening it in a new tab or navigating to the URL, depending on the link's target attribute.
By implementing this custom JavaScript solution, you can ensure that your Revolution slider's touch swipe functionality works seamlessly, even on hyperlinked slides.
Remember, this code is a solution for the specific issue of Revolution slider not sliding on mobile due to hyperlinked slides. If you're experiencing other issues with your Revolution slider, you may need to explore additional troubleshooting steps or seek support from the plugin's documentation and community.
For more information on improving your website's user experience and conversion rates, check out Flowpoint.ai, a web analytics tool that uses AI to identify technical, UX, and content-related issues and generate personalized recommendations to optimize your website.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.