Owl Carousel
Use these custom styles Owl Carousel examples to create slideshows of elements
Getting started
You need to include the following two javascript files before the end of the body tag:
<script src="@@path/vendor/owl.carousel/dist/owl.carousel.min.js"></script>Default
Using the following markup and adding the element inside the .item div you can create multiple sliding elements:
<div class="basic-carousel owl-carousel owl-theme">
<!-- Item 1 -->
<div class="item">
<div class="card border-light">
<img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded-top" alt="profile-image">
<div class="card-body">
<h5 class="card-title mb-2">Bonnie M. Green</h5>
<span class="card-subtitle text-gray font-weight-normal">Web publications designer</span>
<p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<div class="card border-light">
<img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top rounded-top" alt="profile-image">
<div class="card-body">
<h5 class="card-title mb-2">Neil D. Sims</h5>
<span class="card-subtitle text-gray font-weight-normal">Web Developer</span>
<p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<div class="card border-light">
<img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded-top" alt="profile-image">
<div class="card-body">
<h5 class="card-title mb-2">Jose D. Leos</h5>
<span class="card-subtitle text-gray font-weight-normal">React Native Developer</span>
<p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="item">
<div class="card border-light">
<img src="../../assets/img/team/profile-picture-4.jpg" class="card-img-top rounded-top" alt="profile-image">
<div class="card-body">
<h5 class="card-title mb-2">Joseph A. Garth</h5>
<span class="card-subtitle text-gray font-weight-normal">Director</span>
<p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Item 5 -->
<div class="item">
<div class="card border-light">
<img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded-top" alt="profile-image">
<div class="card-body">
<h5 class="card-title mb-2">Bonnie M. Green</h5>
<span class="card-subtitle text-gray font-weight-normal">Web publications designer</span>
<p class="card-text my-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" class="icon icon-xs icon-facebook mr-3">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-twitter mr-3">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-slack mr-3">
<i class="fab fa-slack-hash"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="icon icon-xs icon-dribbble mr-3">
<i class="fab fa-dribbble"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Javascript
This is an example of usage for the example above in Javascript:
$('.basic-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
},
navText: [
'<i class="fas fa-chevron-left"></i>',
'<i class="fas fa-chevron-right"></i>'
]
});
Mousewheel carousel
Awards
We partnered up with Ildiesign
Some quick example text to build on the card title and make up the bulk of the card's content.
Read More
Awards
We partnered up with Ildiesign
Some quick example text to build on the card title and make up the bulk of the card's content.
Read More
Awards
We partnered up with Ildiesign
Some quick example text to build on the card title and make up the bulk of the card's content.
Read More
Awards
We partnered up with Ildiesign
Some quick example text to build on the card title and make up the bulk of the card's content.
Read More
Awards
We partnered up with Ildiesign
Some quick example text to build on the card title and make up the bulk of the card's content.
Read More
Awards
We partnered up with Ildiesign
Some quick example text to build on the card title and make up the bulk of the card's content.
Read More<div class="mouswheel-carousel owl-carousel owl-theme">
<!-- Item 1 -->
<div class="item">
<!-- Blog Card -->
<div class="card border-light">
<img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded-top" alt="image">
<div class="card-body">
<span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
<h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
<!-- End of Blog Card -->
</div>
<!-- Item 2 -->
<div class="item">
<!-- Blog Card -->
<div class="card border-light">
<img src="../../assets/img/blog/image-2.jpg" class="card-img-top rounded-top" alt="image">
<div class="card-body">
<span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
<h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
<!-- End of Blog Card -->
</div>
<!-- Item 3 -->
<div class="item">
<!-- Blog Card -->
<div class="card border-light">
<img src="../../assets/img/blog/image-3.jpg" class="card-img-top rounded-top" alt="image">
<div class="card-body">
<span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
<h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
<!-- End of Blog Card -->
</div>
<!-- Item 4 -->
<div class="item">
<!-- Blog Card -->
<div class="card border-light">
<img src="../../assets/img/blog/image-1.jpg" class="card-img-top rounded-top" alt="image">
<div class="card-body">
<span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
<h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
<!-- End of Blog Card -->
</div>
<!-- Item 5 -->
<div class="item">
<!-- Blog Card -->
<div class="card border-light">
<img src="../../assets/img/blog/image-2.jpg" class="card-img-top rounded-top" alt="image">
<div class="card-body">
<span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
<h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
<!-- End of Blog Card -->
</div>
<!-- Item 6 -->
<div class="item">
<!-- Blog Card -->
<div class="card border-light">
<img src="../../assets/img/blog/image-3.jpg" class="card-img-top rounded-top" alt="image">
<div class="card-body">
<span class="h6 icon-tertiary small"><i class="fas fa-medal mr-2"></i>Awards</span>
<h5 class="card-title mt-3">We partnered up with Ildiesign</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary btn-sm">Read More</a>
</div>
</div>
<!-- End of Blog Card -->
</div>
</div>Javascript
This is an example of usage for the example above in Javascript:
var owl = $('.mouswheel-carousel');
owl.owlCarousel({
loop: true,
nav: false,
margin: 10,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
960: {
items: 2
},
1200: {
items: 2
}
},
navText: [
'<i class="fas fa-long-arrow-alt-left"></i>',
'<i class="fas fa-long-arrow-alt-right"></i>'
]
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY > 0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
Autoplay
Use the following markup example to enable autoplay on the Owl Carousel component:
Basic
$19 / month- 1 free domain
- Storage space: 5GB
- 100k monthly visitors
- One-click staging site
- Search engine wizard
- Community support
Deluxe
$49 / month- 3 free domain
- Storage space: 25GB
- 400k monthly visitors
- SSH/SFTP access
- Free SSL Certificate
- Community support
Ultimate
$89 / month- 5 free domain
- Storage space: 50GB
- 1m+ monthly visitors
- Free site-maintenance
- 5-50websites
- Community support+
<div class="autoplay-carousel owl-carousel owl-theme">
<!-- Item 1 -->
<div class="item">
<!-- Pricing Card -->
<div class="pricing-card">
<div class="card border-light text-center">
<!-- Header -->
<header class="card-header bg-white p-3">
<h2 class="h5 text-primary mb-4">Basic</h2>
<span class="d-block">
<span class="display-1 text-dark font-weight-bold">
<span class="align-top font-medium">$</span>19
</span>
<span class="d-block text-gray font-small">/ month</span>
</span>
</header>
<!-- End Header -->
<!-- Content -->
<div class="card-body">
<ul class="list-group mb-4">
<li class="list-group-item"><strong>1</strong> free domain</li>
<li class="list-group-item">Storage space: <strong>5GB</strong></li>
<li class="list-group-item"><strong>100k</strong> monthly visitors</li>
<li class="list-group-item">One-click staging site</li>
<li class="list-group-item">Search engine wizard </li>
<li class="list-group-item">Community support</li>
</ul>
<button type="button" class="btn btn-primary btn-block" tabindex="0">Start
Starter</button>
</div>
<!-- End Content -->
</div>
</div>
<!-- End of Pricing Card -->
</div>
<!-- Item 2 -->
<div class="item">
<!-- Pricing Card -->
<div class="pricing-card">
<div class="card border-light text-center">
<!-- Header -->
<header class="card-header bg-white p-3">
<h2 class="h5 text-secondary mb-4">Deluxe</h2>
<span class="d-block">
<span class="display-1 text-dark font-weight-bold">
<span class="align-top font-medium">$</span>49
</span>
<span class="d-block text-gray font-small">/ month</span>
</span>
</header>
<!-- End Header -->
<!-- Content -->
<div class="card-body">
<ul class="list-group mb-4">
<li class="list-group-item"><strong>3</strong> free domain</li>
<li class="list-group-item">Storage space: <strong>25GB</strong></li>
<li class="list-group-item"><strong>400k</strong> monthly visitors</li>
<li class="list-group-item">SSH/SFTP access</li>
<li class="list-group-item">Free SSL Certificate </li>
<li class="list-group-item">Community support</li>
</ul>
<button type="button" class="btn btn-secondary btn-block" tabindex="0">Start
Deluxe</button>
</div>
<!-- End Content -->
</div>
</div>
<!-- End of Pricing Card -->
</div>
<!-- Item-3 -->
<div class="item">
<!-- Pricing Card -->
<div class="pricing-card">
<div class="card border-light text-center">
<!-- Header -->
<header class="card-header bg-white p-3">
<h2 class="h5 text-tertiary mb-4">Ultimate</h2>
<span class="d-block">
<span class="display-1 text-dark font-weight-bold">
<span class="align-top font-medium">$</span>89
</span>
<span class="d-block text-gray font-small">/ month</span>
</span>
</header>
<!-- End Header -->
<!-- Content -->
<div class="card-body">
<ul class="list-group mb-4">
<li class="list-group-item"><strong>5</strong> free domain</li>
<li class="list-group-item">Storage space: <strong>50GB</strong></li>
<li class="list-group-item"><strong>1m+</strong> monthly visitors</li>
<li class="list-group-item">Free site-maintenance </li>
<li class="list-group-item"><strong>5-50</strong>websites</li>
<li class="list-group-item">Community support+</li>
</ul>
<button type="button" class="btn btn-tertiary btn-block" tabindex="0">Start
Ultimate</button>
</div>
<!-- End Content -->
</div>
</div>
<!-- End of Pricing Card -->
</div>
</div>Javascript
This is an example of usage for the example above in Javascript:
$('.autoplay-carousel').owlCarousel({
loop: true,
margin: 10,
nav: false,
items: 3,
autoplay: true,
autoplayTimeout: 3000,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
},
navText: [
'<i class="fas fa-long-arrow-alt-left"></i>',
'<i class="fas fa-long-arrow-alt-right"></i>'
]
});
Read more about Owl Carousel from the official plugin website.