javascript - 按 View 滑动危险 slider 而不是一个一个

Question

我正在使用 Swiper Idangerous 插件创建 slider ，但遇到了问题。

我将解释我的问题: Swiper 现在在分页时显示所有项目的项目符号，并且在滑动时滑动到下一个项目。

我需要: 需要分页仅显示页数(而不是项目)并且滑动时需要查看接下来的 4 个项目(因此滑动所有 4 个项目并显示接下来的 4 个项目)。

如果那个插件可以做到这一点？或者其他可以做到这一点？

我添加了一个代码，这样您就可以知道我在做什么，因为我也需要它来响应。

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 4,
  loopedSlides: 4,
  centeredSlides: false,
  spaceBetween: 10,
  grabCursor: true,
  loop: true,
  pagination: '.swiper-pagination',
  paginationClickable: true,
  breakpoints: {
    1200: {
      slidesPerView: 4,
      loopedSlides: 4,
      spaceBetween: 10
    },
    1024: {
      slidesPerView: 3,
      loopedSlides: 3,
      spaceBetween: 10
    },
    768: {
      slidesPerView: 2,
      loopedSlides: 2,
      spaceBetween: 10
    },
    675: {
      slidesPerView: 1,
      loopedSlides: 1,
      spaceBetween: 20
    }
  }
});

.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  color: #000;
  text-align: center;
  padding: 100px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<!-- Slider main container -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
</div>

Answer 1

尝试设置选项

slidesPerGroup: 4