Owl 2 Carousel. Как сделать слайдер внутри слайдера?

Question

[dev123]

Добрый день!
Стоит задача сделать карусель, в которой каждый слайд разделен на 2 части - нижняя статичная картинка, а верхняя должна быть слайдером с миниатюрами. Использую owl 2 carousel для обоих слайдеров. На данный момент получается активировать родительский слайдер, а тот, который внутри - не отрабатывает. Кто может подсказать как решить проблему?

Вот код html (сайт на yii2, есть вкрапления кода для этого фреймворка, но на сам слайдер не влияет):

<div id="block-for-sticky">
<div id="blog-banner" class="blog-banner owl-carousel" style="position:sticky;">
    <a href="/?utm_source=blog&utm_medium=cpm&utm_campaign=rotator&utm_content=skript"><?= Html::img($bundle->baseUrl . '/img/1.jpg', ['alt' => 'Баннер 1']) ?></a>
    <div class="banner2">
        <div id="blog-banner2" class="owl-carousel">
            <?= Html::img($bundle->baseUrl . '/img/A1.jpg', ['alt' => 'Минибаннер 1']) ?>
            <?= Html::img($bundle->baseUrl . '/img/B1.jpg', ['alt' => 'Минибаннер 2']) ?>
            <?= Html::img($bundle->baseUrl . '/img/A2.jpg', ['alt' => 'Минибаннер 3']) ?>
            <?= Html::img($bundle->baseUrl . '/img/B2.jpg', ['alt' => 'Минибаннер 4']) ?>
        </div>
        <div class="banner-subscribe-block" style="position: relative;">
            <img src="/static/img/banner-bg.jpg" alt="">
            <form action="" class="banner-subscribe-form">
                <input type="text" required class="banner-your-name" name="" placeholder="Ваше имя">
                <input type="email" required class="banner-your-email" name="" placeholder="Ваш email">
                <input type="button">
            </form>
        </div>
    </div>
    <a href="/?utm_source=blog&utm_medium=cpm&utm_campaign=rotator&utm_content=registr"><?= Html::img($bundle->baseUrl . '/img/3.jpg', ['alt' => 'Баннер 3']) ?></a>
</div>
</div>

и js:

$("#blog-banner").owlCarousel({
   items: 1,
   loop: true,
   autoplay: true,
   autoplayTimeout: 10000,
   autoplayHoverPause: true,
   dots: false
});

 $("#blog-banner2").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout: 2000,
    autoplayHoverPause: true,
    dots: false
});

Answer 1

[on_click]

https://stackoverflow.com/a/51986632

Answer 2

[Константин Тимошено]

Не знаю, актуально или нет, но возможно, вам это поможет