Есть две owl-карусельки: превьюшная и основная. Они синхронизированы. Обе карусели имеют loop: true
. Не получается заставить превьюшный слайдер центрировать owl-item
-s по клику на них. Что я делаю не так?
Песочница здесь. Код, отвечающий за желаемое поведение, помечу комментарием centered items
(коммент будет в двух местах).
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var slidesPerPage = 4;
var syncedSecondary = true;
sync1.owlCarousel({
items: 1,
slideSpeed: 2000,
nav: true,
autoplay: false,
dots: true,
loop: true,
responsiveRefreshRate: 200,
navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
}).on('changed.owl.carousel', syncPosition);
sync2.on('initialized.owl.carousel', function() {
sync2.find(".owl-item.center").eq(0).addClass("current");
})
/* centered items */
sync2.find('.owl-item').each(function(index) {
var item = $(this).attr('data-position', index);
})
sync2.owlCarousel({
items: slidesPerPage,
dots: false,
nav: false,
loop: true,
center: true,
smartSpeed: 200,
slideSpeed: 1000,
slideBy: slidesPerPage,
responsiveRefreshRate: 100
}).on('click', '.owl-item', function(e) {
var carouselSync1 = $('#sync1').data('owl.carousel');
e.preventDefault();
var current = $(this).index();
carouselSync1.to(carouselSync1.relative(current));
/* centered items */
sync2.trigger('to.owl-carousel', $(this).data('position'));
});
function syncPosition(el) {
var current = el.item.index;
sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
var onscreen = sync2.find('.owl-item.active').length - 1;
var start = sync2.find('.owl-item.active').first().index();
var end = sync2.find('.owl-item.active').last().index();
if (current > end) {
sync2.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
sync2.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
sync1.data('owl.carousel').to(number, 100, true);
}
}
});
#sync1 .item {
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync2 .item {
background: #c9c9c9;
padding: 10px 0px;
margin: 5px;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
#sync2 .item h1 {
font-size: 18px;
}
#sync2 .current .item {
background: #0c83e7;
}
.owl-theme .owl-nav [class*="owl-"] {
transition: all 0.3s ease;
}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {
background-color: #d6d6d6;
}
#sync1.owl-theme {
position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
width: 22px;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
}
#sync1.owl-theme .owl-prev {
left: 10px;
}
#sync1.owl-theme .owl-next {
right: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<div id="sync1" class="owl-carousel owl-theme">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>
<div id="sync2" class="owl-carousel owl-theme">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>