Owl Carousel

2 rows high

by DannyEnglander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<div id="owl-demo" class="owl-carousel">
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=2nd Row" alt="" />
    </div>
</div>

CSS

#owl-demo .owl-item > div img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:4px;
}
#owl-demo .owl-item > div {
    padding: 0px 2px
}

JavaScript

$(document).ready(function () {
    $("#owl-demo").owlCarousel({
        navigation: true,
        pagination: true
    });
});