Как реализовать внешнюю навигацию?

Question

[reinmaker90]

Есть карусель, к которой нужно подключить внешний блок навигации. Нашёл методы navContainer и dotsCobtainer, но не пойму, как организовать разметку так, чтобы кнопки в блоке, который я выделил для навигации, подключились к слайдеру. Пытался, но к моим кнопкам в блоке добавляются кнопки owl, а мои игнорируются или в инспекторе вообще оказываются
закомментироваными.

Answer 1

[Andrii]

Привет, я сделал так

JS

$(document).ready(function() {
  $(".carousel__inner").owlCarousel({
    loop: true,
    margin: 10,
    nav: false,
    responsive: {
      1: {
        items: 1
      },
      600: {
        items: 1
      },
      1000: {
        items: 1
      }
    }
  });
  const owl = $(".owl-carousel");
  owl.owlCarousel();
  // Go to the next item
  $(".owl-next").click(function() {
    owl.trigger("next.owl.carousel", [1100]);
  });
  // Go to the previous item
  $(".owl-prev").click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger("prev.owl.carousel", [1100]);
  });

html

<div class="carousel">
      <div class="container">
        <div class="carousel__inner owl-carousel owl-loaded">
          <div class="owl-stage-outer">
            <div class="owl-stage">
              <div class="owl-item">
                <img src="img/slide_1.jpg" alt="slide" />
              </div>
              <div class="owl-item">
                <img src="img/slide_2.jpg" alt="slide" />
              </div>
              <div class="owl-item">
                <img src="img/slide_3.jpg" alt="slide" />
              </div>
            </div>
          </div>
          <div class="owl-nav">
            <div>
              <button type="button" class="owl-prev">
                <img src="icons/left.svg" alt="left" />
              </button>
            </div>
            <div>
              <button type="button" class="owl-next">
                <img src="icons/right.svg" alt="right" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

Comments

[reinmaker90]

Спасибо огромное, знал что через jq можно легко получить доступ, но js очень тяжело мне дается, такой еще нюанс, у меня на странице 3 слайдера, и теперь они все щелкаются от одной кнопки, как переназначить кнопки что бы они переключали только одни слайдер, как я понял, в твоем примере мы обращаемся ко все каруселям