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

Question

[Stacy None]

Подключил две owl карусели и выглядит это так:

$(document).ready(function() {
  $('.carousel').each(function(){
    var carousel = $(this);
    carousel.owlCarousel({
      loop:true,
      margin:10,
      nav:false,
      dots:false,
      items: 1,
      responsive:{
        0:{
          items:1
        },
        600:{
          items:3
        },
        1000:{
          items:5
        }
      }
    });
    carousel.next().find(".customNextBtn").on('click', function(){
      carousel.trigger("next.owl.carousel");
    });
    carousel.next().find(".customPreviousBtn").on('click', function(){
      carousel.trigger("prev.owl.carousel");
    });
  });
});

Проблема в том, что когда кнопки customPreviousBtn и customNextBtn расположены выше карусели, то они не работают, а когда они ниже - работают.
Если я правильно понял, где-то тут:

carousel.next().find(".customNextBtn").on('click', function(){
      carousel.trigger("next.owl.carousel");
    });
    carousel.next().find(".customPreviousBtn").on('click', function(){
      carousel.trigger("prev.owl.carousel");
    });

нужно указать, чтобы скрипт искал эти кнопки в блоке с определенным id, к примеру "#films", и обернуть их в id=films
Только не знаю как это правильно сделать.

Comments

[tyzberd]

когда выше вместо next() нужно prev(), или через parent(). Выбы хоть сюдя заглянули https://api.jquery.com/next/

Answer 1

[Александр Баранчугов]

Проблема в том что когда кнопки customPreviousBtn и customNextBtn расположены выше карусели то они не работают а когда они ниже работают.

Если я правильно понял суть проблемы, то дело вот в чем:
когда ты вызываешь carousel.next(), то ты берешь соседний "справа" от '.carousel' DOM-элемент, т.е. тот который по DOМ структуре идет сразу за '.carousel'

Соответственно, если ты кнопки хочешь расположить выше карусели, то логично, что этот элемент будет соседний слева от '.carousel', т.е. по DOМ структуре идет сразу перед '.carousel'
Для этого нужно использовать метод prev() вместо next() (читать тут)

Пример:

carousel.prev().find(".customNextBtn").on('click', function(){
      carousel.trigger("next.owl.carousel");
});

Comments

[Stacy None]

Не пойму, зачем выпендриваться ? Раз знаешь, и хочешь ответить напиши просто ответ и всё..

[Александр Баранчугов]

Ответ без пояснения- это как дать списать контрольную )))

[Stacy None]

Александр Баранчугов, На практике легче учится всегда, чем читать бесполезную фигню) Спасибо

[Александр Баранчугов]

Stacy None, согласен, поэтому и пояснение давал из практики )))