Owl 2 Carousel. How to make a slider inside a slider?

Question

JavaScript

Good afternoon!
The task is to make a carousel, in which each slide is divided into 2 parts - the bottom static picture, and the top should be a slider with thumbnails. I use owl 2 carousel for both sliders. At the moment, it turns out to activate the parent slider, but the one inside does not work. Who can tell how to solve the problem?

Here is the html code (the site is based on yii2, there are code inclusions for this framework, but it does not affect the slider itself):

<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>

and 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

https://stackoverflow.com/a/51986632

Answer 2

I don't know if it's relevant or not, but maybe it will help you