2016-09-28 3 views
0

Я смотрю на реализацию слайдера в разных местах и ​​вам нужно управлять каждым отдельно, несколько раз на одной странице, а затем в другом месте на сайте, поэтому я бы хотел, чтобы они были такими:Owl Carousel - несколько ползунков разных элементов управления

  • шаг 1 слайд в то время
  • шаг 3 скользит в то время
  • автопрокрутка

Я могу видеть, как сортировать их по параметрам, но я не уверен, как отделить их так у меня есть контролировать индивидуально.

Я думаю, что мне нужно будет добавить разные классы в html, а затем использовать те, что указаны в .js для идентификации.

Как добавить классы в .js?

я предполагаю его здесь:

f.fn.owlCarousel.options = { 
    items: 5, 
    itemsCustom: !1, 
    itemsDesktop: [1199, 4], 
    itemsDesktopSmall: [979, 3], 
    itemsTablet: [768, 2], 
    itemsTabletSmall: !1, 

Я прочитал это здесь:

owl carousel - Set different items number for each of many sliders placed on the same page

Но я не уверен, как реализовать это в owl.carousel .min.js, так как структура немного отличается или как/где добавлять классы.

См: f.fn.owlCarousel.options = {

Заранее спасибо

Дункан

ответ

2

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

$("#owl-demo1").owlCarousel({ 
    items: 3, 
    itemsDesktop: [1199,3], 
    itemsDesktopSmall: [979,3], 
    itemsMobile: [479,3], 
}); 
$("#owl-demo2").owlCarousel({ 
    items: 5, 
    itemsDesktop: [1199,3], 
    itemsDesktopSmall: [979,3], 
    itemsMobile: [479,3], 
}); 
$("#owl-demo4").owlCarousel({ 
    items: 3, 
    itemsDesktop: [1199,3], 
    itemsDesktopSmall: [979,3], 
    itemsMobile: [479,3], 
}); 
$("#owl-demoupload").owlCarousel({ 
    items: 7, 
    itemsDesktop: [1199,3], 
    itemsDesktopSmall: [979,3], 
    itemsMobile: [479,3], 
});