0

Вот HTML

<div class="big_slider owl-carousel">
    <div class="slide">
        <div class="img_box" style="background-image: url(img/image_03.jpg);"></div>
        </div>
    <div class="slide">
        <div class="img_box" style="background-image: url(img/image_01.jpg);"></div>
    </div>
    <div class="slide">
        <div class="img_box" style="background-image: url(img/image_03.jpg);"></div>
    </div>
</div>

<div class="miniature_slider owl-carousel">
    <div class="slide">
            <div class="miniature">
                <img src="img/image_03.jpg" alt="" />
            </div>
    </div>
    <div class="slide">
            <div class="miniature">
                <img src="img/big_image.jpg" alt="" />
            </div>
    </div>
    <div class="slide">
        <div class="miniature">
            <img src="img/image_03.jpg" alt="" />
        </div>
    </div>
</div>

Вот сылка на картинку с макета

То есть должен получиться на OWL большой слайдер big_slider с навигацией miniature_slider. А miniature_slider должен быть вертикальным. Как это сделать?

1

1 ответ 1

0

Можно сделать без использования второго слайдера, подставляя миниатюры изображений вместо пагинации.

$(document).ready(function () {
    $("#owl-demo").owlCarousel({
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        afterInit: makePages,
        afterUpdate: makePages
    });
    
    function makePages() {
        $.each(this.owl.userItems, function(i) {
            $('.owl-controls .owl-page').eq(i)
                .css({
                    'background': 'url(' + $(this).find('img').attr('src') + ')',
                    'background-size': 'cover'
                })
        });
    }
});
.owl-carousel {
	display: flex !important;
}

.owl-wrapper-outer {
	margin-left: 30px;
}

.owl-controls {
	position: relative;
	order: -1;
	margin-top: 0 !important;
}

.owl-pagination {
	display: flex;
	flex-direction: column;
}

.owl-page {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 50px;
	outline: none;
	opacity: 0.5;
}

.owl-page.active {
	opacity: 1;
}

.owl-page+.owl-page {
	margin-top: 20px;
}

.owl-page span {
	display: none !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>


<div id="owl-demo" class="owl-carousel">
    <div class="item"><img src="http://www.lorempixel.com/960/350?1"></div>
    <div class="item"><img src="http://www.lorempixel.com/960/350?2"></div>
    <div class="item"><img src="http://www.lorempixel.com/960/350?3"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.