Owl Carousel L oop Проблемы, пробелы при достижении конца и скольжение слайдов, переход на входящие слайды - PullRequest
Новая
       55

Owl Carousel L oop Проблемы, пробелы при достижении конца и скольжение слайдов, переход на входящие слайды

0 голосов
/ 01 августа 2020

Теперь проблема, с которой я столкнулся, заключается в том, что когда я перетаскиваю элементы мышью и отпускаю, когда я отпускаю, элемент на короткое время изменяется на элемент, который прокручивается. Ожидаемое поведение будет заключаться в том, что крайний левый слайд остается фиолетовым, но становится черным, это цвет входящего слайда.

enter image description here

enter image description here

I'm also having an issue with the loop on the carousel is that when I have loop it doesn't loop right away, it leaves a white space until all the elements disappear, then loops back to the beginning. I want it to be continuous. Below is a picture of the white space that happens when I scroll to the end of the slides.

enter image description here

image 

var owl = $('.owl-carousel');
owl.owlCarousel({
  margin: 0,
  loop: true,
  items: 4,
  navText: '',
  autoplayTimeout: 6000,
  autoplaySpeed: 1000,
  navSpeed: 1000,
  dotsSpeed: 1000,
  autoplayHoverPause: true,
  mouseDrag: true,
  nav: true,
});
.slide {
  width: 240px;
  min-height: 350px;
  max-height: 350px;
  height: 350px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>

<div class="container">
  <div class="owl-carousel owl-theme">
    <div class="slide" style="background-color: black;"> Your Content </div>
    <div class="slide" style="background-color: red;"> Your Content </div>
    <div class="slide" style=" background-color: green;"> Your Content </div>
    <div class="slide" style=" background-color: blue;"> Your Content </div>
    <div class="slide" style=" background-color: purple;"> Your Content </div>
    <div class="slide" style="background-color: orange;"> Your Content </div>
    <div class="slide" style="background-color: darkcyan;"> Your Content </div>
    <div class="slide" style="background-color: darkblue;"> Your Content </div>

  </div>

...