[Swiper] How to use and customize Swiper.js

When developing websites, there will always be opportunities to create a slider.
Swiper.js is one of the recommended libraries to choose in such cases.

It is jQuery-independent, option-rich, highly customizable, and used worldwide.
In this tutorial, We will explain the basic usage, customization methods, and popular sliders of Swiper.js!

Features of Swiper.js

Swiper.js features include the following.

• No jQuery required
• Lots of options
• Easily responsive
• Easy to add animation effects
• High development frequency
• Supports React and Vue

In the current trend of ‘moving away from jQuery,’ Swiper.js, which does not require jQuery, is truly appreciated. As the movement away from libraries that rely on jQuery gains momentum, Swiper is reassurance.

Also, Swiper.js is rich in options, and we counted 117 options in the latest version, ver11.
Of course, you don’t need to memorize all of them, but it is nice to have a lot of options because it makes it easier to achieve what you want to create.
For example, Swiper.js has the breakpointes option which makes it easy to create a responsive slider, or the effect option which makes it easy to add animation effects.

Also, Swiper.js seems to be under active development. When I first used it in September 2022, the latest version was ver8, but in a little over a year, it has been released up to ver11 (as of December 2023).
We are glad to see that development is active, as it means that bugs are fixed and new functions are added to the library, which is great for the users.

A Disadvantage of Swiper.js

The only disadvantage of Swiper.js is unfortunately its large file size.
We have included a comparison table with other slider libraries.

Large file sizes take a long time to load and slow down the display speed of your website.
However, the method described below article can cover this weakness by reducing the loading cost of Swiper.js to zero.
[Swiper] Reducing the loading cost of Swiper.js to zero


After learning basic usage of Swiper.js, if you are concerned about display speed, please give it a try.

Getting Started with Swiper.js

To use Swiper, there are three methods available, but starting with the CDN is the easiest.

・Use CDN
・Download the source
・Install via npm

For CDN usage, simply add the following two lines to your HTML file, and you’re ready to use Swiper.

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

Basic Usage of Swiper

Let’s now take a look at the basic usage of Swiper.
Make sure not to forget the ‘Getting Started with Swiper.js‘ as explained above.
We’ll proceed by breaking it down into HTML, CSS, and JavaScript for clarity.

Prepare the Parts in HTML

Here, the content of the slides is set as images.
If navigation(arrows) or pagination(dots) are needed in Swiper slider, you must include the HTML tags in your code.

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
    </div>
    <div class="swiper-button-prev"></div>  <!-- if navigation(arrows) is needed -->
    <div class="swiper-button-next"></div>  <!-- if navigation(arrows) is needed -->
    <div class="swiper-pagination"></div>   <!-- if pagination(dots) is needed -->
</div>

Adjust the Appearance with CSS

We reccomend to set the width of the slider in percentage, as this will automatically adjust the width of the slider according to the screen size.
Also, stretch the images to the full width.

.sample-slider {
    width:70%;
}
.sample-slider img {
    width: 100%;
    vertical-align: bottom;
}

Create a Slider with Javascript

Now, let’s finally create the Swiper slider using JavaScript.
If navigation and pagination are required, we need to include the corresponding code in the JavaScript as well.

const sampleSlider = new Swiper('.sample-slider', {
    // if navigation(arrows) is needed
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    // if pagination(dots) is needed
    pagination: {
        el: '.swiper-pagination',
    },
})

Up to this point, the basic slider has been completed, so we provide a demo.
Next, let’s take a look at commonly used options.

If you want to customize navigation(arrows) and pagination(dots), the following article may be helpful.

★Customizing with Images
[Swiper]How to customize arrows of Swiper slider
[Swiper]How to customize pagination of Swiper slider

★Changing Size, Position, and Color
[Swiper]How to change size, position and color of arrows
[Swiper]How to change size, position and color of pagination

Basic options commonly used with Swiper

Since Swiper has too many options, let’s start by looking at the following frequently used four.

All options will be written in the second argument of new Swiper.

new Swiper('.sample-slider', {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: '.swiper-pagination',
    },
    // All options will be written here
})

speed option

You can specify the slide speed with the speed option (in milliseconds).
In the example below, the slide transition takes 4000 milliseconds(=4 seconds).

new Swiper('.sample-slider', {
    speed: 4000,
})

The slide will be move slowly, so please give it a try.

loop option

You can make the slider loopable using the loop option.
Loopable means that after the last slide is displayed, the first slide will come again for next.

new Swiper('.sample-slider', {
    loop: true,
})

The slider become loopable, so please give it a try.

autoplay option

You can enable auto-play for the slider using the autoplay option
The delay parameter specifies the time in milliseconds that each slide remains before transitioning to the next one.

new Swiper('.sample-slider', {
    autoplay: {
        delay: 3000,
    },
})

It will transition to the next slide automatically every 3000 milliseconds(=3 seconds).

slidesPerView option

You can change the number of displayed slides with the slidesPerView option.
Specify the desired number of slides as the value.

new Swiper('.sample-slider', {
    slidesPerView: 3, 
})

The number of visible slides has been changed to 3.

Another commonly used option that goes well with ‘slidesPerView’ is the spaceBetween option.
This option allows you to adjust the spacing between each slide.”

new Swiper('.sample-slider', {
    slidesPerView: 3, 
    spaceBetween: 20,  // added
})

An example of a slider created using all the mentioned options is automatic infinite loop slider.
The way to create this slider is often seen on our site.

Pagination Options

Swiper also offers abundant pagination options, making it easy to customize pagination.
As an example, let’s try formatting the pagination as fractions.

new Swiper('.sample-slider', {
    pagination: {                       
        el: '.swiper-pagination',
        type: 'fraction',           // added
    },
})

You should now see that the pagination is displayed in fraction notation.

There are various options for pagination, and each of them can be easily customized.
We’ve compiled them here, so feel free to refer to it if you’re interested.

Responsive design

Swiper provides an option called breakpoints that makes responsive design easy.
By specifying as follows, you can switch the number of displayed slides between desktop and mobile.

new Swiper('.sample-slider', {
    breakpoints: {
        600: {
            // The number of displayed slides when the window width is 600 or more
            slidesPerView: 2
        },
    },
})

Furthermore, you can enable slider only for mobile using the methods provided by Swiper.
We’ve explained this in detail below, so please refer to it if you’re interested.

[Swiper] Responsive Slider with Breakpoints
[Swiper] How to Enable Slider Only For a Mobile

Animation Effects

Swiper provides a option which is called effect , allowing you to easily add animation effects.
As an example, let’s try the commonly seen fade animation for a smooth transition.

new Swiper('.sample-slider', {
    effect: 'fade',
    speed: 4000,
})

Now that it smoothly fades in and out, give it a try.

effectオプションは他にもあり、様々なアニメーション効果を付けることができます。

The other effect options are explained in below article.

Accessibility Improvements

Swiper.js allows you to improve the accessibility (usability) of sliders by using options.
For example, you can make the slider operatable by keyboards as shown below.

new Swiper('.sample-slider', {
    keyboard: true,     // make the slider operatable by keyboards
})

The slider has become operatable by keyboards, so please give it a try.

There is also an option called a11y which arrows you to create a slider that is easy for the visually impaired to operate.

Popular Sliders

With Swiper, you can create popular sliders commonly seen, such as the ones listed below.
These articles are also frequently viewed on our website.

Using Swiper with React or Vue

Swiper is compatible with modern JavaScript frameworks/libraries such as React or Vue.
However, please note that the loading and usage may vary slightly, so caution is needed when using Swiper with React or Vue.

I have explained how to use Swiper with React in the following article.
How to use Swiper.js with React

Our site doesn’t have the article for Vue, so we provide a link to the official documentation for reference.
Swiper Vue.js Components

That is all, it was about how to use Swiper.js.