文章/答案/技术大牛

发布

社区首页 >问答首页 >swiperjs响应浏览器宽度问题

问swiperjs响应浏览器宽度问题
EN

Stack Overflow用户

提问于 2020-03-09 13:25:10

回答 1查看 20.1K关注 0票数 3

嗨，我正在尝试创建我的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

Stack Overflow用户

回答已采纳

发布于 2020-03-10 21:50:30

语法错误。

问题1

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

将此更改为<div class="swiper-slide">Slide 1</div>：<div>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

票数 10

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60595112

复制

相似问题

问swiperjs响应浏览器宽度问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问swiperjs响应浏览器宽度问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问swiperjs响应浏览器宽度问题
EN