Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)

Image/Content Slider is one of the common components we find in a website. It is quite simple to create one with jQuery. In fact; we have discussed it once in our previous tutorial. Today though, with the increasing number of people who are using touch-enabled devices, we may have to rethink how we build it.

Commonly, a slider is equipped with Next and Prev buttons to navigate the content, which works fine in a desktop computer. But, in touch devices, it would be better if the users were also able to slide-navigate with finger swipes. In today’s tutorial, we will show you how to build this using jQuery and SwipeJS.

Requirements

Let’s first get our ingredients and tools ready for the slider. We will need a style sheet and an HTML document, jQuery, SwipeJS, and a few images – in this tutorial, I’ll be using the fantastic photographs from Jared Lim.

Basic Setup

SwipeJS is very easy to set up. The following is the HTML markup. We need a div with an id, and one more div to wrap the list of the slides; each slide is also wrapped with a div and you can add anything in the slide, not just images.

SwipeJS needs a few lines of basic style rules. These style rules define the slider width, and display the slide inline.

.swipe {
  overflow: hidden;
  position: relative;
  max-width: 600px;
  width: 100%;
  height: 350px;
  margin: 100px auto 0;
}

.swipe-wrap {
  overflow: hidden;
  position: relative;
}

.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
}

Here is the JavaScript part that puts the slider into live. To make the script run properly, we need to ensure the whole document is loaded first. We can do so either by adding the script at the very bottom of the page, or using jQuery .ready() method, like so.

$(document).ready(function() {
    // Your code goes here
});
 

Using jQuery, we can add Swipe function like so.

Slider = $('#slider').Swipe().data('Swipe');
 

This is the basic setup, which will run the slider with the default configuration. SwipeJS accepts some parameters to change the default configuration. These parameters have to be set within the .Swipe(), for example:

Slider = $('#slider').Swipe({
  auto: 3000,
  continuous: false
}).data('Swipe');

Utilizing the APIs

Furthermore, we can control our slider behavior with the provided APIs. In this example, using the .next() and .prev() method in SwipeJS, we can navigate.

First, let’s add the button, like so:

<span class="nav prev">Prev</span><span class="nav next">Next</span>

Then coupled with the jQuery click event, we can do the following, so that when the users click on the button it will show the next slide or the previous one, as assigned.

$('.next').on('click', Slider.next);$('.prev').on('click', Slider.prev);

Now, you can see the slider in action in the demo page, and it is better to try this out in a touchscreen device.

• View Demo
• Download Source

References

• SwipeJS Repository in Github.
• jQuery Click Event.