Swiper 旋转木马消失的问题 - 如何使连续

Question

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

问题向左或向右滚动滑块时，它会出现故障并消失。您可以通过在白色中随机滚动来恢复它 space，但对于最终用户来说它看起来完全消失了。

目标无论有多少图像，滑块基本上都会自我复制而不是显示白色 space 结尾。例如：

幻灯片 1、幻灯片 2、幻灯片 3、幻灯片 1、幻灯片 2、幻灯片 3...

对比

幻灯片 1、幻灯片 2、幻灯片 3，白色 space，出现故障，消失，出现故障...

目前我正在尝试找出是否有办法通过此处的 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

删除 !important：

.swiper-slide {
    width: auto;
}

给JS添加"slidesPerView"参数：

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

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

Swiper 旋转木马消失的问题 - 如何使连续

Issues with Swiper Carousel Disappearing - How to Make Continuous

jquery

image-gallery

swiper