Stasy11
@Stasy11
The best epta

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

Подключил две 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
Только не знаю как это правильно сделать.
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
AlexanderBaranchugov
@AlexanderBaranchugov
Я такой
Проблема в том что когда кнопки 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");
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
09 апр. 2020, в 21:17
30000 руб./за проект
09 апр. 2020, в 21:10
5000 руб./за проект