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>
        ...
    </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>
</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>
        ...
      </div>
    </div>
  </div>
</div>

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
.full-page
  padding: 0

.swiper-container
  height: auto
  width: 100%

.swiper-slide
  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

.list-group
  width: 100%

.calendar
  margin-top: 20px
  text-align: center

These are the styles for the left fixed sidebar:

// fixed left side-bar
.time-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
.swiper-slide-active
  .list-group
    .list-group-item
      background: rgba(3, 169, 244, 0.21)

.list-group-item
  border-radius: 0
  border: 0
  border-bottom: 1px solid #d4d4d4
  margin-bottom: 0a

.list-group-item:hover
  color: #03a9f4
  background-color: #fff

.list-group-item.disabled
    background: #fff

.swiper-slide-active
  .list-group
    .list-group-item:first-child
      background: #03a9f4

.swiper-slide-active
  .list-group
    .list-group-item:nth-child(2)
      padding-top: 20px

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

// arrow for active element
.arrow-down
  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.