swiperjs responsive browser width problems

Jeffrey Tanuwidjaja picture Jeffrey Tanuwidjaja · Mar 9, 2020 · Viewed 15k times · Source

hi i'm trying to create responsive slider on my wordpress website, i want to have slider on desktop 5 columns, on tablet 4 columns, and on mobile 3 columns, and hide arrows on mobile using css this are my codes:

but is seems not working, on any browser width it still display 3 columns, how to fix? thanks

<html>
<!-- start slider -->
<div class="swiper-container">

      <div class="swiper-wrapper">
        <div>slider item</div>
        <div>slider item</div>
        <div>slider item</div>
        <div>slider item</div>
        <div>slider item</div>

  </div>
    <!-- Add Pagination -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>
}
</html>

and this is my jquery

jQuery(document).ready(function () {
  //initialize swiper when document ready
  var mySwiper = new Swiper ('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 10,
  breakpoints: {  
    '480': {
      slidesPerView: 4,
      spaceBetween: 40,},
    '@640': {
      slidesPerView: 5,
      spaceBetween: 50, },
  },
    // Optional parameters   
     freeMode: true,
    loop: false,
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,},
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev', },

})

});

Answer

Ezra Siton picture Ezra Siton · Mar 10, 2020

Wrong syntax.

Problem 1

Missing swiper-slide class. https://swiperjs.com/get-started/

Change this: <div>Slide 1</div> to <div class="swiper-slide">Slide 1</div>

Problem 2

Remove this @ + the single quotes (Not '480' but 480).

Change

'@640': {
      slidesPerView: 5,
      spaceBetween: 50, },
  },

To:

640: {
      slidesPerView: 5,
      spaceBetween: 50, },
  },
var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

Simple example:

html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css">

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider item</div>
    <div class="swiper-slide">slider item</div>
    <div class="swiper-slide">slider item</div>
    <div class="swiper-slide">slider item</div>
    <div class="swiper-slide">slider item</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<!-- Swiper JS -->
<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
  //initialize swiper when document ready
  var swiper = new Swiper ('.swiper-container', {
    slidesPerView: 2,
    spaceBetween: 10,
    breakpoints: {
      480: {
        slidesPerView: 4,
        spaceBetween: 40,
      },
      640: {
        slidesPerView: 5,
        spaceBetween: 50,
      }
    },
    // Optional parameters   


  })
</script>

Follow this demo:

https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html

https://stackblitz.com/edit/swiper-demo-37-responsive-breakpoints?file=index.html