How to implement external navigation?

Question

Owl Carousel

There is a carousel to which you need to connect an external navigation block. I found the navContainer and dotsCobtainer methods, but I don’t understand how to organize the markup so that the buttons in the block that I selected for navigation are connected to the slider. I tried, but owl buttons are added to my buttons in the block, and mine are ignored or even
commented out in the inspector.

Answer 1

hi i did this

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>