Проблемы с исчезающей каруселью Swiper - как сделать непрерывной - PullRequest
Новая
       31

Проблемы с исчезающей каруселью Swiper - как сделать непрерывной

0 голосов
/ 09 мая 2019

Я использую Swiper Carousel, чтобы сделать слайдер, и столкнулся с непростой проблемой, которую, я надеюсь, может решить кто-то с большим опытом, чем я.

Проблема При прокруткеползунок влево или вправо, он глючит и исчезает.Вы можете вернуть его случайным образом, прокручивая пустое пространство, но для конечного пользователя это выглядит так, как будто оно полностью исчезло.

Цель Независимо от того, сколько изображений, слайдер будет по сути дублироватьСам против показа пробела заканчивается.Например:

Слайд 1, Слайд 2, Слайд 3, Слайд 1, Слайд 2, Слайд 3 ...

против

Слайд 1, Слайд 2, Слайд 3, пробел, сбой, исчезновение, сбой обратно ...

В настоящее время Я пытаюсь выяснить, есть ли способ сделать это с помощью вызовов API здесь: http://idangero.us/swiper/api/#layout, но мои попытки не увенчались успехом.

Веб-сайт Вот живая версия этого сайта (на полпути вниз вы увидите горизонтальные изображения, которыеможно перемещать с помощью мыши для перетаскивания: Демонстрационный сайт

ПРИМЕЧАНИЕ В редакторе сниппетов это может выглядеть очень хорошо, поэтому, если здесь все выглядит хорошо, пожалуйста, проверьте на демосайт, и вы увидите проблему, с которой я сталкиваюсь.

СПАСИБО заранее за то, что взглянули на это для меня. Я ценю это.

код 

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>

Ответы [ 2 ]

1 голос
/ 09 мая 2019

Основная причина вашего глюка: .swiper-slide { width: auto!important;

Карусель рассчитывает позиции по ширине изображения - поэтому иногда фактически она находится далеко слева от экрана.

0 голосов
/ 09 мая 2019

Удалить! Важные на: 

.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'
})
...