Swiper

The Most Modern Mobile Touch slider, responsive and fully customizable.


Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

Include the library in your page

1. Link the CSS right before the head closing tag of your page, where you see the other library scripts. This line should be inserted before main.css.

              
  <!-- swiper Slider Stylesheet -->
  <link rel="stylesheet" href="assets/css/swiper-bundle.min.css"/>
              
            

2.Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.min.js and before custom.js.

            
  <!-- Swiper Slider Js -->
  <script type="text/javascript" src="assets/js/swiper-bundle.min.js"></script>
            
          

Basic Usage

The Basic Swiper HTML Structure


<div class="swiper">
  <div class="swipper-wraper">
    <div class="swiper-slide">your content</div>
    <div class="swiper-slide">your content</div>
    <div class="swiper-slide">your content </div>
  </div>
</div>

The Basic swiper js activation

$(document).ready(function(){
    new Swiper('.class-name', {

    })
});

Consult the Swiper Documentation for more details.