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

swiper slider


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


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

slide_image1
slide_image2
slide_image3





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

slide_image1
slide_image2
slide_image3




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

You can subscribe by SNS

Sponcerd Link

Popular Posts

*