Create a Swiping Touch Slider or Swiper in Drupal with Views Slideshow Tutorial

A routine part of a Drupal build spec is to create a touch or tap swipe compatible Drupal slider. This is also often referred to as a touch sensitive carousel or hero in Drupal design. This element offers an image rotator, providing a pre-defined set of images which slide through a list from left to right. With modern design incorporating touch features from the ground-up as mobile first for the wealth of mobile devices, it's more important than ever for touch swipe functionality to work. Views Slideshow, a module for Drupal CMS, enables slides of content to animate one to another; a Drupal slider. The module was originally created before touch features were vital to Drupal implementations and websites in general. There's a way to quickly add the functionality to a Drupal slider, though. Let's walk through making your own Drupal swiper.

Views Slideshow Touch Swipe Tutorial

Wouldn't it be neat if Drupal's Views Slideshow worked with a mobile device to enable tap-swiping to change the slideshow image?

Turns out it's possible. This turns your slider into a swiper. The user interaction changes from an activated slide by way of a click, to a gesture that the user is committing: a swipe. This feature is often referred to as a Drupal swiper.

Drupal Swiper

You could use the jQuery TouchSwipe plugin. Alas, that requires integrating yet another plugin library. What about writing up some custom JavaScript to integrate the basic touch sensing yourself, then integrating the reaction with Views Slideshow?

That's just what I needed to do on a project that had to keep using the Drupal module Views Slideshow. What I didn't want to do is attempt to rewrite or override an existing part of Views Slideshow. After all, the module already has all the pieces in place - I just needed to have a script capture the user's "touch" action and then apply an appropriate slide change. Here's just how to do that:

jQuery to Capture a Swipe and then Trigger a Slide Change

You can trigger a "next" or "previous" click event on a slideshow upon swipe to change the slide like this (you'll need to change the element classes as they relate to your slideshow):

/*
 *  Assign handlers to the simple direction handlers.
 */ 
var swipeOptions= {
	swipeLeft:swipeLeft,
	swipeRight:swipeRight,
	threshold:30
}

$(function() {
// Attach swiping event 
	 $("div.slideshow").swipe( swipeOptions );
}
);
// Swipe handlers: 
// The only arg passed is the original touch event object 
function swipeLeft(event, direction) {
	  $('#views_slideshow_controls_text_next_view_name a') .trigger('click');
}
function swipeRight(event, direction) {
	  $('#views_slideshow_controls_text_previous_view_name a') .trigger('click');
}

Implementing this JavaScript (jQuery) code will give you a swipe compatible slider or swiper.

Drupal Slider with FlexSlider: Touch Swipe Sensitive Carousels

Turns out there's a better way though which is somewhat new. FlexSlider, a plugin to the Views Slideshow module might just make your day. The FlexSlider module has become a separate entity from the Views Slideshow module over the years; you can use as more than just a display plugin for Views Slideshow. FlexSlider offers its own Drupal slider carousel that can fit your needs without ever using Views Slideshow in some cases. FlexSlider offers swipe support for Drupal sliders. FlexSlider is a great way to make your own Drupal swiper.

Update: Drupal.org user kbasarab has turned this into a sandbox project if you'd like a more direct solution.

If you enjoyed this Drupal guide to image sliders with touch support, consider sharing it. If you're still having trouble, get in touch to hire the Drupal experts.