Просто вывод слайдов с адаптивом
(function(){
$(document).ready(function(){
var owl = $('.sertificats_block');
owl.owlCarousel({
loop: true,
nav: true,
items: 4,
margin: 18,
smartSpeed: 600,
autoplay: true,
responsiveClass: true,
responsive: {
0: {
items: 2,
margin: 10,
},
600: {
items: 3,
},
1000: {
items: 5,
}
}
});
});
})();
Кастомные nav и dots
<div class="nav-slide">
<div class="slide-arrow prev"></div>
<ul class="thumbs">
<li class="thumb active"><span>01</span></li>
<li class="thumb"><span>02</span></li>
<li class="thumb"><span>03</span></li>
</ul>
<div class="slide-arrow next"></div>
</div>
(function(){
$(document).ready(function(){
var owl = $('.slider-two_block');
owl.owlCarousel({
loop: true,
items: 1,
smartSpeed: 600,
dots: true,
dotsData: true,
dotsContainer: '.slider-two .nav-slide .thumbs',
});
$('.slider-two .next').click(function () {
owl.trigger('next.owl.carousel');
});
$('.slider-two .prev').click(function () {
owl.trigger('prev.owl.carousel');
});
$('.slider-two .thumb').click(function () {
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
$('.thumb').removeClass('active');
$(this).addClass('active');
});
});
})();