5/5/2021 Getting Started With Swiper

Getting Started With Swiper

Installation
There are few options on how to include/import Swiper into your project:

Install from NPM

We can install Swiper from NPM

$ npm install swiper

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';

const swiper = new Swiper(...);

By default Swiper exports only core version without additional modules (like Navigation, Pagination,
etc.). So you need to import and configure them too:

// core version + navigation, pagination modules:

import SwiperCore, { Navigation, Pagination } from 'swiper/core';

// configure Swiper to use modules

SwiperCore.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

If you want to import Swiper with all modules (bundle) then it should be imported
from  swiper/bundle :

// import Swiper bundle with all modules installed

import Swiper from 'swiper/bundle';

https://swiperjs.com/get-started 1/4
5/5/2021 Getting Started With Swiper

// init Swiper:
const swiper = new Swiper(...);

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/swiper-bundle.css" />

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

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

If you use ES modules in browser, there is a CDN version for that too:

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

const swiper = new Swiper(...)

</script>

Download assets
If you want to use Swiper assets locally, you can directly download them
from https://unpkg.com/swiper/

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>

https://swiperjs.com/get-started 2/4
5/5/2021 Getting Started With Swiper

...
</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>

Swiper CSS Styles/Size

In addition to Swiper's CSS styles, we may need to add some custom styles to set Swiper size:

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

Initialize Swiper
Finally, we need to initialize Swiper in JS:

const swiper = 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',
https://swiperjs.com/get-started 3/4
5/5/2021 Getting Started With Swiper

},

// And if we need scrollbar

scrollbar: {
el: '.swiper-scrollbar',
},
});

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.

https://swiperjs.com/get-started 4/4