在视图中按项目滑动危险的滑块不是一个一个答案

【问题标题】：Swiper idangerous slider by items at view not one by one在视图中按项目滑动危险的滑块不是一个一个
【发布时间】：2016-08-17 13:43:53
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： javascript swiper

【解决方案1】：

尝试设置选项

slidesPerGroup: 4

【讨论】：

这个答案应该被接受。我正在浏览 API 文档是一个自豪的时刻，我检查了许多其他选项，但没有这个选项。我刚来这个问题，我的问题就解决了。继续保持朋友。
非常感谢您的来信！我对 Stacknow 交换还是很陌生，很感激。
我只是经常外出，谢谢。
是的！是的！保护你！尝试为 AGES 执行此操作但没有成功。哇，韦恩人，我非常爱你，而你至今...

【解决方案2】：

如果您希望一次显示多张幻灯片，请使用

slidesPerView: >1

【讨论】：

【解决方案3】：

只需添加以下代码：每组幻灯片：4， loopFillGroupWithBlank：真，

【讨论】：