title: swiperjs responsive browser width problems
body: <p>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:</p>
  
  <p>but is seems not working, on any browser width it still display 3 columns, how to fix? thanks</p>
  
  <pre><code>&lt;html&gt;
  &lt;!-- start slider --&gt;
  &lt;div class="swiper-container"&gt;
  
        &lt;div class="swiper-wrapper"&gt;
          &lt;div&gt;slider item&lt;/div&gt;
          &lt;div&gt;slider item&lt;/div&gt;
          &lt;div&gt;slider item&lt;/div&gt;
          &lt;div&gt;slider item&lt;/div&gt;
          &lt;div&gt;slider item&lt;/div&gt;
  
    &lt;/div&gt;
      &lt;!-- Add Pagination --&gt;
      &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
  
      &lt;!-- If we need scrollbar --&gt;
      &lt;div class="swiper-scrollbar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  }
  &lt;/html&gt;
  </code></pre>
  
  <p>and this is my jquery</p>
  
  <pre><code>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', },
  
  })
  
  });
  </code></pre>