swiperjs 响应式浏览器宽度问题答案

【问题标题】：swiperjs responsive browser width problemsswiperjs 响应式浏览器宽度问题
【发布时间】：2020-03-09 05:25:10
【问题描述】：

嗨，我正在尝试在我的 wordpress 网站上创建响应式滑块，我想在桌面 5 列、平板电脑 4 列和移动设备 3 列上使用滑块，并使用 css 在移动设备上隐藏箭头这是我的代码：

但似乎不起作用，在任何浏览器宽度上它仍然显示 3 列，如何解决？谢谢

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

这是我的 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', },

})

});

【问题讨论】：

标签： swiper swiperjs

【解决方案1】：

语法错误。

问题 1

缺少swiper-slide 类。 https://swiperjs.com/get-started/

改变这个： <div>Slide 1</div> 到 <div class="swiper-slide">Slide 1</div>

问题 2

删除这个@ + 单引号（不是'480'，而是480）。

改变

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

收件人：

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

简单示例：

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/swiper@6.4.8/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/swiper@6.4.8/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>

关注此演示：

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

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

【讨论】：