Getting Started With Swiper

1a. Download and install Swiper

First of all we need to download required Swiper files:

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/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>
Don't forget to change 4.x.x to 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>

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:

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 = 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 = 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, and you have enabled node modules resolving for Swiper as it uses Dom7 as a dependency.

What next?

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