There are few options on how to include/import Swiper into your project:
We can install Swiper from NPM
$ npm install swiper
// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/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 Swiper, { Navigation, Pagination } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// init Swiper:
const swiper = new Swiper('.swiper', {
// configure Swiper to use modules
modules: [Navigation, Pagination],
...
});
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';
// import styles bundle
import 'swiper/css/bundle';
// init Swiper:
const swiper = new Swiper(...);
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://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/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://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.esm.browser.min.js'
const swiper = new Swiper(...)
</script>
If you want to use Swiper assets locally, you can directly download them from https://www.jsdelivr.com/package/npm/swiper
Now, we need to add basic Swiper layout to our app:
<!-- Slider main container -->
<div class="swiper">
<!-- 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>
In addition to Swiper's CSS styles, we may need to add some custom styles to set Swiper size:
.swiper {
width: 600px;
height: 300px;
}
Finally, we need to initialize Swiper in JS:
const swiper = new Swiper('.swiper', {
// 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',
},
});
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.
If you have questions about Swiper ask them in StackOverflow or Swiper Discussions.
Create issue on GitHub if you found a bug.
If you are looking for support, we have a private Discord support chat room for Swiper Patrons.