Create Mobile-Friendly Touch Sliders

Using SwiperJS and Vanilla JavaScript

3D Coverflow Effect

Building a touch slider from scratch using just JavaScript can be a daunting task. That’s why we are going to use Swiper to build a fast, responsive, and mobile-first touch slider.

Swiper is the default slider component in the Ionic Framework. Swiper uses hardware-accelerated transitions, and its performance is comparable to native apps. Besides this, it is used by some of the biggest companies, such as Adobe and Cisco.

Swiper offers several enticing features such as lazy loading images, parallax effects, and much more. Additionally, you can use libraries like jQuery and Zepto alongside Swiper and also customize Swiper with your own custom CSS.

Let’s get started.

Installation

You can install Swiper using three methods:

Download Swiper and save it locally.
Use CDN to use Swiper by adding the following two lines in between the head tags of your index.html file:

<link *rel*="stylesheet" *href*="https://unpkg.com/swiper/swiper-bundle.css">
<script *src*="https://unpkg.com/swiper/swiper-bundle.js"></script>

You can also download Swiper via npm using the npm install swiper command. Make sure you have npm installed on your computer.

I will be using the second option to demonstrate some of the Swiper features below.

Getting Started

Since I am using the second method to install and set up Swiper, I will need to add Swiper to my main HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SwiperJS Demo</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="./styles.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="./main.js"></script>
</head>

As you can see, I have my custom styles.css file along with my own JavaScript file. Currently, both styles.css and main.js files are empty.

Adding Swiper to HTML

To add Swiper to our HTML file, we need to put the following code in the body of our HTML.

<div class="swiper-container">     
  <div class="swiper-wrapper">        
     <div class="swiper-slide">Slide 1</div>    
     <div class="swiper-slide">Slide 2</div>     
     <div class="swiper-slide">Slide 3</div>      
  </div>   
  <div class="swiper-pagination"></div>   
     <div class="swiper-button-prev"></div>  
     <div class="swiper-button-next"></div>    
  <div class="swiper-scrollbar"></div> 
</div>

The swiper-container div class is the container that contains all the HTML code related to Swiper. The swiper-wrapper class contains the slides you want to display. You can replace the dummy text( such as “Slide 1”) with your own HTML components. The swiper-pagination class provides the pagination dots, showing the index of the slides.

It is worth noting that the swiper-container is the main wrapper class. Hence, you can manipulate it to give your touch slider margin, padding, color, width, etc., as per your needs.

The swiper-button-next and swiper-button-prev div class enables the previous and next arrow buttons to facilitate pagination. However, if you don’t want the arrows, you can simply omit this piece of code. The last div class, swiper-scrollbar, provides a scrollbar at the bottom of the slider.

You can give custom height and width to the Swiper as per your needs in your CSS file.

I have given the following values:

*{
margin:0;
padding:0;
}
.swiper-container{
  padding:1rem;
  height: 80vh;
}

The final step to finish setting up Swiper is initializing in JavaScript. You can do it in either the same HTML file or use your custom JS file and link it with the HTML as I have done.

Either way, the script to initialize Swiper should be the same and is given below:

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})

As you can see, Swiper takes two parameters. The first is the main container class which has all the elements that Swiper needs, and the second is an object containing properties and configuration of our slider. The container in our case is swiper-container, and we have inputted it as the first parameter in the Swiper function.

We can easily set the scroll direction along with other properties, such as scrollbar, loop, pagination, autoplay, and so on.

Here is what our code looks like right now

This is vertical. To get a horizontal slider with pagination, check the gist below.

Add the direction property in the Swiper function and set it to “horizontal.” I have edited the CSS, too, to center the contents of the slide.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
  <script>
    var swiper = new Swiper('.swiper-container', {
      direction:'horizontal',
      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>
</body>

</html>

Horizontal Slider with pagination

You can create several cool transition effects as well. To get the full list check the official site.

I will be showcasing some of my favorite effects below.

Parallax Effect

Parallax effect

Since we have everything set up already, we just need to change a few properties to achieve this parallax effect.

We need to add navigation, speed, and parallax to our script. After adding those, the script should look like this:

<script>    
var swiper = new Swiper('.swiper-container', {    
  speed: 600,      
  parallax: true,      
  pagination: {        
     el: '.swiper-pagination',       
     clickable: true,     
 },     
  navigation: {        
     nextEl: '.swiper-button-next',       
     prevEl: '.swiper-button-prev',      
 },    
}); 
</script>

You also need to add the background image property under the swiper-containerclass, like this:

<div class="parallax-bg" style="background-image:url(./images/nature-1.jpg)" data-swiper-parallax="-23%"></div>

3D Coverflow Effect

3D Coverflow Effect

You can easily create this awesome 3D effect using Swiper. We have just to modify our files a little bit.

<script>    
var swiper = new Swiper('.swiper-container', { 
effect: 'coverflow',     
grabCursor: true,      
centeredSlides: true,      
slidesPerView: 'auto',      
coverflowEffect: {        
      rotate: 50,        
      stretch: 0,        
      depth: 100,        
      modifier: 1,        
      slideShadows: true,      
},      
pagination: {
       el: '.swiper-pagination',      
  },   
});
</script>

Also, add images to our swiper-wrapper class like this:

<div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(./images/nature-1.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(./images/nature-2.jpg)"></div>
....
</div>

You can find all the files shown in my Github repo. I have used separate CSS and JavaScript files, along with a few sample images to experiment with.

Conclusion

Swiper can provide a modern, mobile-friendly touch slider to your websites, mobile web apps, and mobile native/hybrid apps. It can be easily integrated with React, Vue.js, and Svelte as well.

It can easily be used with vanilla JS as well as with CDN. Swiper also comes with a very rich API which allows you to create custom components such as your own pagination and parallax effects.