owl-carousel

by Max Shu

HTML

<script src="https://code.jquery.com/jquery-2.1.1.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.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
    <div class="item">
        <img src="http://placehold.it/200x200" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/400x200" data-merge="2" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/200x200" alt="Owl Image" />
    </div>
</div>

JavaScript

$(document).ready(function() {
	$(".owl-carousel").owlCarousel({
		autoPlay: 3000, //Set AutoPlay to 3 seconds
		dots: true,
		margin: 10,
		items: 2
	});
});