Swiper, You know something

Swiper - is the free and most present day portable touch slider with equipment quickened changes and astonishing local conduct. It is proposed to be utilized as a part of versatile sites, portable web applications, and portable local/crossover applications. Planned for the most part for iOS, yet in addition works awesome on most recent Android, Windows Phone 8 and present day Desktop browsers.

 

Powered With Top Notch Features

  • Library Agnostic
  • 1:1 Touch movement
  • Mutation Observer
  • Reach API
  • Full True RTL Support
  • Multi Row Slides Layout
  • Transition Effects
  • Two-way Control
  • Full Navigation Control
  • Flexbox Layout
  • Most Flexible Slides Layout Grid
  • Parallax Transitions
  • Images Lazy Loading

Getting Started With Swiper

1a. Download and install Swiper

First of all we need to download required Swiper files:

$ bower install swiper
  • Or, using Atmosphere as Meteor package:
$ meteor add nolimits4web:swiper
  • Or, using NPM
$ npm install swiper

In the downloaded/installed package we need files from the dist folder.

1b. Use Swiper from CDN

If you don't want to include Swiper files in your project, you may use it from Swiper on cdnjs. The following files are available:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>

2. Include Swiper Files To Website/App

After that we need to include Swiper's CSS and JS files to our website/app. In your html file:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

If you use jQuery or Zepto in your project, then you may use a bit lightweight jQuery version of Swiper:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>

3. Add Swiper HTML Layout

Now, we need to add basic Swiper layout to our app:

<!-- 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>

4. Swiper CSS Stlyes/Size

After that, we may need to set Swiper size in your CSS file:

.swiper-container {
    width: 600px;
    height: 300px;
}

5. Initialize Swiper

Finally, we need to initialize Swiper in JS. There are few options/places to do that:

  • The best option will be in inline script or in script file that is included in the very end of body (right before closing </body> tag):
  ...
  <script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,
    
    // If we need pagination
    pagination: '.swiper-pagination',
    
    // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // And if we need scrollbar
    scrollbar: '.swiper-scrollbar',
  })        
  </script>
</body>
  • If you use jQuery/Zepto in your site, then you can initialize it in any of your JS files, but make sure that you do it within document.ready event:
  $(document).ready(function () {
    //initialize swiper when document ready  
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: true
    })        
  });
  • Otherwise (but not recommended), you can initialize it within window.onload event:
  window.onload = function () {
    //initialize swiper when document ready  
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: true
    })        
  };