Owl Carousel

Membuat Carousel Slider dengan menggunakan Plugin Owl Carousel

by Miftah Faroq

HTML

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<h3>Owl Carousel</h3>

	<!-- Set up your HTML -->
	<div class="owl-carousel owl-theme">
	    <div class="item"><h4>1</h4></div>
	    <div class="item"><h4>2</h4></div>
	    <div class="item"><h4>3</h4></div>
	    <div class="item"><h4>4</h4></div>
	    <div class="item"><h4>5</h4></div>
	    <div class="item"><h4>6</h4></div>
	    <div class="item"><h4>7</h4></div>
	    <div class="item"><h4>8</h4></div>
	    <div class="item"><h4>9</h4></div>
	    <div class="item"><h4>10</h4></div>
	    <div class="item"><h4>11</h4></div>
	    <div class="item"><h4>12</h4></div>
	</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
		
		body{
    		font-family: 'Roboto', sans-serif;
		}	
	
		h4{
			background: #3498db;
			padding: 1rem;
			height: 10rem;
		}

JavaScript

$('.owl-carousel').owlCarousel({
		    loop:true,
		    margin:10,
		    nav:true,
		    autoplay:true,
		    autoplayTimeout:3000,
		    autoplayHoverPause:true,
		    responsive:{
		        0:{
		            items:1
		        },
		        600:{
		            items:3
		        },
		        1000:{
		            items:5
		        }
		    }
		})