OWL carousel multiple with different settings

31.3.2021

ZÁHLAVÍ

<link rel="stylesheet" type="text/css" href="https://code.kubanavratil.com/user/documents/upload/res2020/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://code.kubanavratil.com/user/documents/upload/res2020/owl.theme.default.min.css">

ZÁPATÍ

<script src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res2020/owl.carousel.min.js' type="text/javascript"></script>
<script>

$(document).ready(function(){
$('.owl-one').owlCarousel({
loop:true,
margin:30,
responsiveClass:true,
responsive:{
0:{
items:4,
nav:false,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true
},
600:{
items:6,
nav:false,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true
},
1000:{
items:8,
nav:false,
loop:true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true
}
}
});

$('.owl-two').owlCarousel({
loop:true,
margin:30,
responsiveClass:true,
responsive:{
0:{
items:2,
nav:false,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true
},
600:{
items:3,
nav:false,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true
},
1000:{
items:4,
nav:false,
loop:true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true
}
}
});
});

</script>

CAROUSEL

<div class="owl-one owl-carousel owl-theme">
<div class="item">
<h4><a href="#"><img style="display: block; margin-left: auto; margin-right: auto;" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/brand_armada.png' /></a></h4>
</div>
<div class="item">
<h4><a href="#"><img style="display: block; margin-left: auto; margin-right: auto;" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/brand_armada.png' /></a></h4>
</div>
<div class="item">
<h4><a href="#"><img style="display: block; margin-left: auto; margin-right: auto;" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/brand_armada.png' /></a></h4>
</div>
<div class="item">
<h4><a href="#"><img style="display: block; margin-left: auto; margin-right: auto;" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/brand_armada.png' /></a></h4>
</div>
</div>

<div class="owl-two owl-carousel owl-theme">
<div class="item">
<h4><a href="#"><img style="display: block; margin-left: auto; margin-right: auto;" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/brand_armada.png' /></a></h4>
</div>
<div class="item">
<h4><a href="#"><img style="display: block; margin-left: auto; margin-right: auto;" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/brand_armada.png' /></a></h4>
</div>
<div class="item">
<h4><a href="#"><img style="display: block; margin-left: auto; margin-right: auto;" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/brand_armada.png' /></a></h4>
</div>
<div class="item">
<h4><a href="#"><img style="display: block; margin-left: auto; margin-right: auto;" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/brand_armada.png' /></a></h4>
</div>
</div>

Fiddle - https://jsfiddle.net/97j9gmtm/2/