Как вложить owl carousel в другой owl carousel?

Для вложения одного Owl Carousel в другой вам потребуется некоторые дополнительные настройки.

Для начала, у вас должны быть два отдельных контейнера, каждый из которых будет представлять собой отдельный Owl Carousel:

<div id="parent-carousel" class="owl-carousel">
  <div class="item"><h4>Slide 1</h4></div>
  <div class="item"><h4>Slide 2</h4></div>
</div>

<div id="child-carousel" class="owl-carousel">
  <div class="item"><h4>Slide 1</h4></div>
  <div class="item"><h4>Slide 2</h4></div>
</div>

Затем вы должны инициализировать каждый Owl Carousel отдельно с помощью JavaScript:

$(document).ready(function(){
  $("#parent-carousel").owlCarousel({
    items: 1,
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    autoplay: true,
    autoplayTimeout: 2000,
    autoplayHoverPause: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 5
      }
    }
  });

  $("#child-carousel").owlCarousel({
    items: 1,
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    autoplay: true,
    autoplayTimeout: 2000,
    autoplayHoverPause: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 5
      }
    }
  });
});

В приведенном выше примере я использовал Owl Carousel 2 и jQuery. Обратите внимание, что вы должны подключить соответствующие библиотеки перед их использованием.

Для вложения одного Owl Carousel в другой, вы можете использовать события Owl Carousel. В данном примере я буду использовать событие onTranslated, чтобы проверить, когда происходит переключение слайда в родительском каруселе. Когда слайд переключается, вы можете обновить содержимое вложенного каруселя в соответствии с активным слайдом родительского каруселя.

$(document).ready(function(){
  // Инициализация родительского каруселя
  $("#parent-carousel").owlCarousel({
    // Настройки родительского каруселя
    onTranslated: function(){
      // Получаем индекс активного слайда
      var activeIndex = $(".owl-item.active").index();

      // Обновляем вложенный карусель в соответствии с активным слайдом
      $("#child-carousel").trigger('to.owl.carousel', activeIndex);
    }
  });

  // Инициализация вложенного каруселя
  $("#child-carousel").owlCarousel({
    // Настройки вложенного каруселя
  });
});

В приведенном выше примере при переключении слайда в родительском каруселе мы получаем индекс активного слайда и обновляем вложенный карусель в соответствии с этим индексом с помощью метода trigger и события to.owl.carousel.

Надеюсь, это поможет вам вложить один Owl Carousel в другой. Если у вас возникнут дополнительные вопросы, пожалуйста, не стесняйтесь задавать.