Owl-carousel2 DEMO - items in 2 rows (oke)
https://codepen.io/dukecroc/pen/gzMrjx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/OwlCarousel2/OwlCarousel2/develop/dist/owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div> Content 1</div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
<div> Content 8</div>
<div> Content 9</div>
<div> Content 10</div>
<div> Content 11</div>
<div> Content 12</div>
<div> Content 13</div>
<div> Content 14</div>
<div> Content 15</div>
</div>
</body>
<script>
$(".owl-carousel").owlCarousel({
nav: false,
dots: false,
loop: false,
rewind: true,
stagePadding: 0,
margin: 4,
checkVisibility: true,
navElement: 'div',
responsive: {
0: {
items: 1,
slideBy: 1
},
768: {
items: 2,
slideBy: 2
},
1024: {
items: 3,
slideBy: 3
},
1280: {
items: 4,
slideBy: 4
},
1440: {
items: 5,
slideBy: 1
}
}
});
</script>
</html>PreviousHow can I add class to the first and last item among the visible items of Owl Carousel 2? (ok)NextHow can I create a carousel slick with multiple rows? (ok)
Last updated
Was this helpful?