Когда я уменьшаю ширину карусели совы, то показываю пустые места до и после навигации - PullRequest
Новая
       14

Когда я уменьшаю ширину карусели совы, то показываю пустые места до и после навигации

0 голосов
/ 02 марта 2020

Когда я уменьшаю ширину карусели совы, то показываю пустые места до и после навигации

Мой код здесь: 

$(document).ready(function(){
$('.slider-wrap').owlCarousel({
  center: true,
  items: 3,
  loop: true,
  margin: 10,
  nav: true,
  dots: false,
  touchDrag  : false,
  mouseDrag  : false
});

$('.slider-wrap .owl-stage').css('transform','translateX(0)');
$('.slider-wrap').on('changed.owl.carousel', function(e) {
var slidIndex = (e.item.index + 1) - e.relatedTarget._clones.length / 2;

if(slidIndex == 1){
  $('.slider-wrap .owl-stage').css('background-color','yellow');
  $('.slider-wrap .owl-stage').css('transform','translateX(0)');
}
});

});
.item{
  height: 100px;
  background-color: red;
  
}
.owl-item {
    width: 50px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
<div class="container">
		<div class="row">
			<div class="slider-container">
				<div class="slider-wrap owl-carousel">
					<div class="item">
						1
					</div>
					<div class="item">
						2
					</div>
					<div class="item">
						3
					</div>
					<div class="item">
						4
					</div>
					<div class="item">
						5
					</div>
					<div class="item">
						6
					</div>
				</div>
			</div>
		</div>
	</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

Когда я уменьшаю ширину карусели совы, то показываю пустые места до и после навигации.

Изображение Карусели моей совы:

enter image description here

1 Ответ

0 голосов
/ 02 марта 2020

Добро пожаловать на ТАК!

Чтобы достичь желаемого, вам не нужно изменять ширину элемента карусели, а вместо этого увеличивайте число item в JS, чтобы оно само подстраивалось, пожалуйста, для большей понимания см. Ниже fiddle. 

$(document).ready(function(){
$('.slider-wrap').owlCarousel({
  center: true,
  items: 10,
  loop: true,
  margin: 10,
  nav: true,
  dots: false,
  touchDrag  : false,
  mouseDrag  : false
});

$('.slider-wrap .owl-stage').css('transform','translateX(0)');
$('.slider-wrap').on('changed.owl.carousel', function(e) {
var slidIndex = (e.item.index + 1) - e.relatedTarget._clones.length / 2;

if(slidIndex == 1){
  $('.slider-wrap .owl-stage').css('background-color','yellow');
  $('.slider-wrap .owl-stage').css('transform','translateX(0)');
}
});

});
.item{
  height: 100px;
  background-color: red;
  
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
<div class="container">
		<div class="row">
			<div class="slider-container">
				<div class="slider-wrap owl-carousel">
					<div class="item">
						1
					</div>
					<div class="item">
						2
					</div>
					<div class="item">
						3
					</div>
					<div class="item">
						4
					</div>
					<div class="item">
						5
					</div>
					<div class="item">
						6
					</div>
				</div>
			</div>
		</div>
	</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
...