我如何使用swiper.js进行轮播视图

时间：2019-05-23 12:29:26

标签： javascript swiper

我尝试使用swiper.js进行以下轮播视图

enter image description here

在中心的两个部分中，左右两个部分（但这是截止点）

这是我的代码：

.swiper-container {
  height: 200px;
}

.swiper-container .swiper-slide img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}
<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
</head>

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://imgur.com/0MfA5Yi.png" alt="バナー1">
      </div>
      <div class="swiper-slide">
        <img src="https://imgur.com/CZQBkVr.png" alt="バナー2">
      </div>
      <div class="swiper-slide">
        <img src="https://imgur.com/iM4VWsL.png" alt="バナー3">
      </div>
      <div class="swiper-slide">
        <img src="https://imgur.com/KHZoSng.png" alt="バナー4">
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
      effect: "slide",
      loop: true,
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      // slidesPerGroup: 2,
      slidesPerView: 4,
      spaceBetween: 10,
      centeredSlides: true,
      init: false,
      onTransitionEnd: function() {},
      onTransitionStart: function() {}
    });
    mySwiper.init();
  </script>
</body>

但是，我调整了slidesPerView或spaceBetween的值，但无法实现。

我应该如何解决？

0 个答案:

没有答案
相关问题
最新问题