Swiper is a Javascript library that builds trendy touch sliders with hardware-accelerated transitions. Our dev expert, Juan, teaches you how to make the most of it in 3 simple steps!
1. Import Swiper JS
Start by importing the Swiper Js library. You can install it as a Node package, via CDN, in HTML using the script tag, or as an ES6 module via CDN.
In our example, we will use the HTML importable version for practical reasons.
Importing CSS files
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Swiper's CSS: Must be imported along the JS code because it is needed for the correct functioning. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
</head>
Importing JS file
<!-- Swiper JS: Better that you put it before the closing tag of the body element to improve loading times. -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
2. Create a template
Create your template in HTML. It will be the layout for your slider with buttons for switching slides and paging.
Keep Swiper’s basic classes. The library won’t run without them. You can add other classes to each HTML element in the template but don’t delete default classes.
HTML template
<!-- Swiper -->
<!--DO NOT change swiper classes, they must be the same unless you change the swiper base css. It will break if you do it.-->
<div class="swiper bits-tips-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
3. Build the Swiper Object
Build the swiper object in your JS script using these parameters:
1st parameter: the name of the main container class. It is the one with the swiper class.
2nd parameter: contains an object with settings you can check at swiperjs.com
You can adjust settings in several ways, from the time range each slide will display to an infinite loop.
In the following example, the parameters indicate:
- Horizontal direction of the slides
- Classes of buttons to change slides and paging.
You can use other classes in the paging elements. Add them to the parameters. You can even use HTML IDs.
Example JS Swiper
(function () {
// init Swiper:
const swiper = new Swiper(".bits-tips-container", {
direction: "horizontal",
loop: true,
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
})();
If you enjoyed our tips and are craving for more, check out these Terminal, Shell, or Console secrets from a supercoder!
✍️ This article was written by our copywriter, Sofia, in collaboration with our JS expert, Juan.
