Создание слайдера с навигацией на OWL

24 марта 2021, 08:20

Вот 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 должен быть вертикальным. Как это сделать?

Answer 1

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

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