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

    NearYou
    @NearYou
    PHP Developer
    Привет, я сделал так

    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>
    Ответ написан
    1 комментарий