按视图滑动危险滑块而不是一个一个

Question

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

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

我需要的：需要分页仅显示页数（而不是项目）并且滑动时需要查看接下来的 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

Answer 2

只需添加以下代码： slidesPerGroup:4, loopFillGroupWithBlank: true,

Answer 3

如果您要同时显示多张幻灯片，请使用

slidesPerView: >1

按视图滑动危险滑块而不是一个一个

Swiper idangerous slider by items at view not one by one

javascript

swiper