навигационные кнопки на сове карусели, влияющие на другие ползунки

Question

У меня есть две карусели совы с пользовательской навигацией, работающие, когда только одна карусель, но когда я добавляю несколько каруселей, все карусели функционируют одинаково и не зависят

Вот мой FIDDLE

Вот мой JS-код

jQuery(function(){
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
    autoplay: 2000,
    items:1,
    nav:false,
    autoplay:true,
    autoplayTimeout:5000,
    autoplayHoverPause:true, 
    loop: true,
    dots: false,
    onInitialized  : counter, //When the plugin has initialized.
    onTranslated : counter //When the translation of the stage has finished.
});
jQuery('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
jQuery('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})
function counter(event) {
   var element   = event.target;         // DOM element, in this example .owl-carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index + 1;     // Position of the current item

  // it loop is true then reset counter from 1
  if(item > items) {
    item = item - items
  }
  jQuery(element).parent().find('.counter').html(item + " / " + items);
}
});

Вот мой FIDDLE снова

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

Я думаю, что это как-то связано с нажатиями кнопок, оно не находит своего родительского div, я думаю,

Answer 1

Вы должны инициализировать каждую сову отдельно. Если вы можете использовать each из jQuery. Например, для вашего случая:

jQuery(function(){
var owlContainers = jQuery('.container');

owlContainers.each(function(index, owlItem) {
  var $owlContainer = jQuery(owlItem);
  var $owl = $owlContainer.find('.owl-carousel');
  $owl.owlCarousel({
    autoplay: 2000,
    items:1,
    nav:false,
    autoplay:true,
    autoplayTimeout:5000,
    autoplayHoverPause:true, 
    loop: true,
    dots: false,
    onInitialized  : counter, //When the plugin has initialized.
    onTranslated : counter //When the translation of the stage has finished.
  });
  $owlContainer.find('.customNextBtn').click(function() {
    $owl.trigger('next.owl.carousel');
  })
  // Go to the previous item
  $owlContainer.find('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    $owl.trigger('prev.owl.carousel', [300]);
  })
})

function counter(event) {
   var element   = event.target;         // DOM element, in this example .owl-carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index + 1;     // Position of the current item

  // it loop is true then reset counter from 1
  if(item > items) {
    item = item - items
  }
  jQuery(element).parent().find('.counter').html(item + " / " + items);
}
});

Это работает хорошо, потому что мы используем разные кнопки «предыдущий» и «следующий» для каждой карусели.

P.S. Пожалуйста, измените класс .container на .owl-wrapper, это необходимо, потому что мы должны разделить стили CSS и логику JS

P.S.S Это будет работать для карусели 'N' на странице

Answer 2

для соответствующего решения ::

    jQuery(function(){
    var owl1 = jQuery('#owl-carousel1');
    var owl2 = jQuery('#owl-carousel2');
    owl1.owlCarousel({
        autoplay: 2000,
        items:1,
        nav:false,
        autoplay:true,
        autoplayTimeout:5000,
        autoplayHoverPause:true, 
        loop: true,
        dots: false,
        onInitialized  : counter, //When the plugin has initialized.
        onTranslated : counter //When the translation of the stage has finished.
    });

owl2.owlCarousel({
        autoplay: 2000,
        items:1,
        nav:false,
        autoplay:true,
        autoplayTimeout:5000,
        autoplayHoverPause:true, 
        loop: true,
        dots: false,
        onInitialized  : counter, //When the plugin has initialized.
        onTranslated : counter //When the translation of the stage has finished.
    });
    jQuery('.customNextBtn').click(function() {
        owl1.trigger('next.owl.carousel');
    })
    // Go to the previous item
    jQuery('.customPrevBtn').click(function() {
        // With optional speed parameter
        // Parameters has to be in square bracket '[]'
        owl1.trigger('prev.owl.carousel', [300]);
    })
    function counter(event) {
       var element   = event.target;         // DOM element, in this example .owl-carousel
        var items     = event.item.count;     // Number of items
        var item      = event.item.index + 1;     // Position of the current item

      // it loop is true then reset counter from 1
      if(item > items) {
        item = item - items
      }
      jQuery(element).parent().find('.counter').html(item + " / " + items);
    }
    });

добавить идентификаторы на обе карусели.