Как я делаю вид карусели, используя swiper.js - PullRequest
Новая
       16

Как я делаю вид карусели, используя swiper.js

0 голосов
/ 23 мая 2019

Я пробую следующий вид карусели, используя 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 и не могу сбыться.

Как мне решить?

...