Question

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

我会解释我的问题： Swiper现在在分页时显示所有项目的子弹，并在滑动时滑动到下一个项目。

我需要什么：需要分页显示只有页数（不是项目），当刷卡需要看到接下来的4个项目时（所以滑动所有4个项目并显示接下来的4个项目）。

如果可以使用该插件？或者其他人可以这样做？

我添加了一个代码，这样您就可以知道自己在做什么，同时我也需要这样做才能做出回应。

＆＃13;

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
        	            }
        	        }
        		});

＆＃13;

.swiper-container {
        width: 100%;
        height: 300px;
    }
.swiper-slide {
  color:#000;
  text-align:center;
  padding:100px 0px;
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试设置选项

slidesPerGroup: 4

Answer 2

如果您希望一次显示多张幻灯片

slidesPerView: >1

Answer 3

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

Swiper idangerous滑块由视图中的项目逐个

3 个答案: