Как присвоить действие только к данному блоку?

Question

[Тимур Нигметов]

Доброго времени суток.
Имеется owl карусель. Все блоки у нее реализованы через id (#owl-clients)
$("#owl-clients").owlCarousel({

autoPlay: 3000, //Set AutoPlay to 3 seconds
navigation: false,
pagination: false,
items: 3,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3]

});

Перевел карусель на классы, но при нажатии на назад и вперед листаются все карусельки на странице. Как реализовать данную схему не прибегая к разделению каруселей на отдельные классы и т.п.? Спасибо!

Answer 1

[Николай Шабалин]

var $carousels = $('.owl-carousel'); // класс ваших каруселек
$carousels.each(function() {
  $(this).owlCarousel({...})
})

Comments

[Тимур Нигметов]

Блин. Подскажите пожалуйста как с данным кодом реализовать.
var full = $(".full-image-slide");
var thumbnail = $(".thumbnail-image-slide");

full.each(function () {
$(this).owlCarousel({
items: 1,
singleItem: true,
slideSpeed: 1000,
navigation: false,
pagination: false,
afterAction: syncPosition,
responsiveRefreshRate: 200,
});
})

thumbnail.each(function () {
$(this).owlCarousel({
items: 3,
itemsDesktop: [1199, 10],
itemsDesktopSmall: [979, 10],
itemsTablet: [768, 8],
itemsMobile: [479, 4],
navigation: false,
pagination: false,
responsiveRefreshRate: 100,
afterInit: function (el) {
el.find(".owl-item").eq(0).addClass("synced");
}
});
})
function syncPosition(el) {
var current = this.currentItem;
thumbnail
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if (thumbnail.data("owlCarousel") !== undefined) {
center(current)
}
}

thumbnail.on("click", ".owl-item", function (e) {
e.preventDefault();
var number = $(this).data("owlItem");
full.trigger("owl.goTo", number);
});

function center(number) {
var thumbnailvisible = thumbnail.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for (var i in thumbnailvisible) {
if (num === thumbnailvisible[i]) {
var found = true;
}
}

if (found === false) {
if (num > thumbnailvisible[thumbnailvisible.length - 1]) {
thumbnail.trigger("owl.goTo", num - thumbnailvisible.length + 2)
} else {
if (num - 1 === -1) {
num = 0;
}
thumbnail.trigger("owl.goTo", num);
}
} else if (num === thumbnailvisible[thumbnailvisible.length - 1]) {
thumbnail.trigger("owl.goTo", thumbnailvisible[1])
} else if (num === thumbnailvisible[0]) {
thumbnail.trigger("owl.goTo", num - 1)
}

};

[Тимур Нигметов]

Пример реализации тут: owlgraphic.com/owlcarousel/demos/sync.html

[Николай Шабалин]

Тимур Нигметов: скиньте, пожалуйста, это куда-нибудь. Допустим codepen.io

[Тимур Нигметов]

Николай Шабалин: codepen.io/Nigmetov/pen/jrVGXp

[Николай Шабалин]

Тимур Нигметов: с первого раза не вышло. Не знаю, чем Вам помочь.

[Тимур Нигметов]

Николай Шабалин: и на этом спасибо