How to create and customize a slider

A few days ago I had to work as a frontend developer because I needed to create some html static pages for mobile devices. One requirement was to have a scrollable component that mimics a calendar interface.

Building a slider from scratch takes a long time for sure, so I decided to use Swiper, an open-source slider compatible with most browsers and platforms.

I chose Swiper among many other candidates because it can be easily installed via Bower, which is currently one of the most popular package manager tools.

To install Swiper launch:

$ bower install swiper

If you want to save new dependencies to your bower.json, run:

$ bower install swiper -- save

Now we need to include the generated CSS and JS files in our website:

<link rel="stylesheet" href="path/to/swiper.css">
<script src="path/to/swiper.js"></script>

This is the basic html structure of a Swiper slider and we can start from it to build our own:

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>    
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>    
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>

I replicated the structure of the sliders within my html file, adapting it to my needs:

<div class="swiper-container">
  <!-- Slides wrapper -->
  <div class="swiper-wrapper">    
    <!-- Slides -->
    <div class="calendar swiper-slide">

      <!-- bootstrap list -->
      <div class="list-group">
      <span class="list-group-item head-list">9/10</span>
        <div class="arrow-down"></div>
        <a href="#" class="list-group-item">Book time slot</a>
        <a href="#" class="list-group-item disabled">Not available</a>

The next step is to initialize the slider and its behaviour via javascript:

  var mySwiper = new Swiper ('.swiper-container', {
    pagination: '.swiper-pagination',
    slidesPerView: 2,
    centeredSlides: true,
    paginationClickable: true,
    spaceBetween: 0,
    initialSlide: 0

The last step is to add some styles to the slider in order to make it more usable and nicer. I wrote some SASS styles which will be compiled by Gulp in standard CSS. To stylize the main div that contains all the slides, I added the following styles:

// configure slider
  padding: 0

  height: auto
  width: 100%

  text-align: center
  background: #fff
  width: 60%
  // Center slide text vertically
  display: -webkit-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex
  -webkit-box-pack: center
  -ms-flex-pack: center
  -webkit-justify-content: center
  justify-content: center
  -webkit-box-align: center
  -ms-flex-align: center
  -webkit-align-items: center
  align-items: center

  width: 100%

  margin-top: 20px
  text-align: center

These are the styles for the left fixed sidebar:

// fixed left side-bar
  width: 25%
  display: block
  position: absolute
  z-index: 2
  margin-top: 20px
  color: gray

In order to customize the presentation of the active element of the slider I used mostly the “swiper-slider-active” class. This class is added automatically by the library on the selected slide:

// active element
      background: rgba(3, 169, 244, 0.21)

  border-radius: 0
  border: 0
  border-bottom: 1px solid #d4d4d4
  margin-bottom: 0a

  color: #03a9f4
  background-color: #fff

    background: #fff

      background: #03a9f4

      padding-top: 20px

// list first element (header)
    height: 45px
    background: #bfbfbf
    color: #fff
    border-bottom: 0
    font-size: 15px

// arrow for active element
  position: absolute
  width: 0
  height: 0
  border-left: 93px solid transparent
  border-right: 93px solid transparent
  border-top: 10px solid #03a9f4

This is the final result:


In my opinion Swiper has proved to be an extremely versatile and powerful tool. It provides a long list of available parameters that make easier to achieve different goals. Moreover, there are many available demos from which you can get some ideas and realize that the customization possibilities are endless.

Just go to this link and take what you need to start building your slider.

Leave a Reply

Please Login to comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.