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 NPM, enter in terminal:
```
$ npm install swiper
```

1b. Use Swiper from CDN

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

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.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>

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 Styles/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):

<body>
  ...
  <script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.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
  })
};

As a CommonJs module

Swiper is fully compatible with CommonJs modules and can be used in Node.js-like environment:

var Swiper = require('swiper');

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

As an ES module

Swiper package comes with ES module version which can be used where supported or with bundlers like Webpack or Rollup:

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

In case you use it as an ES module make sure:

you have enabled Babel or Buble to transpile it to ES5 syntax,
you have enabled node modules resolving and babel transpiling for Swiper as it uses Dom7 and ssr-window packages as dependencies.

As browser ES module

There is also browser-compatible ES module if you target modern browsers and use ES modules directly:

<script type="module">
  import Swiper from 'https://unpkg.com/swiper/js/swiper.esm.browser.bundle.min.js';

  const swiper = new Swiper(/* ... */)
</script>

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 ask them in StackOverflow and don't forget to tag your question with swiper tag.
Create issue on GitHub if you found a bug.