Question

我正在使用Swiper Carousel制作滑块，并遇到了一个小问题，我希望有一个比我能解决的经验更多的人。

问题向左或向右滚动滑块时，它会突然消失并消失。您可以通过在空白区域中随意滚动来将其恢复，但对于最终用户而言，它似乎已经完全消失了。

目标不管有多少图像，滑块本质上都会复制自己，而不显示空白结尾。例如：

幻灯片1，幻灯片2，幻灯片3，幻灯片1，幻灯片2，幻灯片3 ...

vs

幻灯片1，幻灯片2，幻灯片3，空白，小故障，消失，小故障返回...

当前我正在尝试找出是否可以通过以下方式使用API调用来完成此操作：http://idangero.us/swiper/api/#layout，但我进行的尝试并未成功。

网站这是此站点的实时版本（在下半部分，您会看到水平图像可以通过使用鼠标拖动来滑动：Demo Site

注意在代码段编辑器中可能看起来还不错，因此，如果在这里看起来不错，请在演示站点上进行测试，您会看到我遇到的问题。

提前

谢谢，帮我看看一下。我很感激。

代码

jQuery(document).ready(function($) {
	// SWIPER FOR CAROUSEL
	var mySwiper2 = new Swiper ('.swiper-container-2', {
      // Optional parameters
	  init: true,
      direction: 'horizontal',
      loop: true,
	  preloadImages: true
    })
});

.swiper-container-2 {
    width: 100%;
}
.swiper-slide {
	width: auto!important;
	margin: 0 15px;
}
.swiper-slide img {
	max-height: 600px;
}
.swiper-container-2:hover {
    cursor: url(/wp-content/uploads/curse-custom-v2.png), auto;
}
.swiper-slide div {
	text-align: center;
	font-family: 'gt_sectra_fineregular_italic';
	display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container-2">

<!-- Additional required wrapper -->
<div class="swiper-wrapper">

<!-- Slides -->
<div class="swiper-slide">

<img src="https://stable.stable-demos.com/wp-content/uploads/slide-1.jpg" />
<div>This is about this image</div>
</div>
<div class="swiper-slide">

<img src="https://stable.stable-demos.com/wp-content/uploads/slide-2.jpg" />
<div>Some information about this one too</div>
</div>
<div class="swiper-slide">

<img src="https://stable.stable-demos.com/wp-content/uploads/slide-1.jpg" />
<div>Wow this is amazing stuff</div>
</div>
</div>
</div>

Answer 1

小故障的主要原因是.swiper-slide { width: auto!important;

轮播会根据图像宽度计算位置-因此有时实际上它在屏幕的最左侧。

Answer 2

删除以下重要信息！

.swiper-slide {
    width: auto;
}

将“ slidesPerView”参数添加到JS：

var mySwiper2 = new Swiper ('.swiper-container-2', {
  // Optional parameters
  init: true,
  direction: 'horizontal',
  loop: true,
  preloadImages: true,

  /* THIS PAL RIGHT HERE*/ 
  slidesPerView: 'auto'
})

抽水旋转木马消失的问题-如何进行连续

2 个答案: