Getting Started With Swiper

1a. Download and install Swiper

First of all we need to download required Swiper files:

We can download them from Swiper GitHub repository
Or we can install them via Bower, enter in terminal:
```
$ bower 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>

Don't forget to change 3.x.x with actual Swiper version

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 options will be in inline script or in script file that is included in the very end of 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 may 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 may 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
    })        
  };

What next?

As you see it is really easy to integrate Swiper into your website or app. So here are your next steps:

Go to API Documentation to learn more about all Swiper API and how to control it.
Look at available Demos.
If you have questions about Swiper don't hesitate to ask them in our Forum. If you prefer StackOverflow then don't forget to tag your question with swiper tag.
If you found bug create issue on GitHub.