[Swiper]How to create simple responsive slider with swiper.js

Although there are many javascript libraries which can make a silder, swiper.js is the one of the most popular library which dose not require jQuery.

In this article, I will show you how to create a simple responsive slider with swiper.js

Contents

①load required libraries from CDN
②HTML : prepare required parts for swiper slider
③Javascript : create a slider
④CSS : fixing the style with css
The full text of source code.

①load required libraries from CDN

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

The above are latest version at this point(September 2022).
You can always check latest version of swiper.js on the official website.
https://swiperjs.com/get-started#use-swiper-from-cdn

②HTML : prepare required parts for swiper slider

<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>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

You need to same classes with the above except top most parent class sample-slider.
Otherwise the layout may be skewed or slider may not work.

③Javascript : create a slider

const swiper = new Swiper('.sample-slider', {
    loop: true,                         //loop
    autoplay: {                         //autoplay
        delay: 2000,  
    },       
    pagination: {                       //pagination(dots)
        el: '.swiper-pagination',
    },
    navigation: {                       //navigation(arrow)
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

Now we can see a simple slider! All that is left is fixing the style with css.

④CSS : fixing the style with css

Let’s adjust slider width by CSS.
By using % instead of px for its width, the slider would be responsive.

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

Now the simple responsive slider has been completed!

The full text of source code.

In the end, I put the full text of source code.

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

<style>
    .sample-slider{
        width:70%;
    }
    .sample-slider img{
        width: 100%;
    }
</style>

<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>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script>
  const swiper = new Swiper('.sample-slider', {
      loop: true,                         //loop
      autoplay: {                         //autoplay
          delay: 2000,  
      },       
      pagination: {                       //pagination(dots)
          el: '.swiper-pagination',
      },
      navigation: {                       //navigation(arrow)
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
      },
  })
</script>

That’s all, it was about How to create a simple responsive slider with swiper.js

If you want to know about swiper slider, below articles might be helpful.
[Swiper]How to customize arrows of Swiper slider
[Swiper]How to customize pagination of Swiper slider

If you are interested in how various slider can be made by swiper.js, please refer below article.
Swiper Demo 16 Slider