Get started with owl-carousel CDN
MIT licensed
Owl Carousel is a popular JS plugin for creating responsive and touch-friendly slideshows.
Tags:- carousel
- jquery
- slider
Stable version
Copied!
How to start using owl-carousel CDN
<!DOCTYPE html>
<html>
<head>
<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://cdn.cdnhub.io/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<style>
.owl-carousel {
width: 100%;
margin: 0 auto;
}
.owl-item {
text-align: center;
background-color: #f4f4f4;
padding: 20px;
border: 1px solid #e5e5e5;
}
.owl-item img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-5">Owl Carousel Example</h1>
<div class="owl-carousel owl-theme" id="owl-example">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 3200px;">
<div class="owl-items">
<div class="owl-item cloned" style="width: 320px; margin-right: 30px;">
<img src="image1.jpg" class="img-fluid">
</div>
<div class="owl-item cloned" style="width: 320px; margin-right: 30px;">
<img src="image2.jpg" class="img-fluid">
</div>
<div class="owl-item cloned" style="width: 320px; margin-right: 30px;">
<img src="image3.jpg" class="img-fluid">
</div>
<!-- Add more items here -->
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#owl-example").owlCarousel({
items: 3,
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true
});
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!