@dev123

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

Добрый день!
Стоит задача сделать карусель, в которой каждый слайд разделен на 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
});
  • Вопрос задан
  • 821 просмотр
Пригласить эксперта
Ответы на вопрос 2
on_click
@on_click
Ответ написан
Комментировать
Не знаю, актуально или нет, но возможно, вам это поможет
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы