Owl Carousel
Use these custom styles Owl Carousel examples to create slideshows of elements
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 p-3">
<div class="card bg-primary shadow-soft border-light">
<img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded-xl p-2" alt="Bonnie portrait">
<div class="card-body">
<h2 class="h5 card-title mb-2">Bonnie Green</h2>
<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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item p-3">
<div class="card bg-primary shadow-soft border-light">
<img src="../../assets/img/team/profile-picture-1.jpg" class="card-img-top rounded-xl p-2" alt="Neil portrait">
<div class="card-body">
<h2 class="h5 card-title mb-2">Neil Sims</h2>
<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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item p-3">
<div class="card bg-primary shadow-soft border-light">
<img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded-xl p-2" alt="Jose portrait">
<div class="card-body">
<h2 class="h5 card-title mb-2">Jose Leos</h2>
<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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="item p-3">
<div class="card bg-primary shadow-soft border-light">
<img src="../../assets/img/team/profile-picture-4.jpg" class="card-img-top rounded-xl p-2" alt="Joseph portrait">
<div class="card-body">
<h2 class="h5 card-title mb-2">Joseph Garth</h2>
<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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Item 5 -->
<div class="item p-3">
<div class="card bg-primary shadow-soft border-light">
<img src="../../assets/img/team/profile-picture-6.jpg" class="card-img-top rounded-xl p-2" alt="Patricia portrait">
<div class="card-body">
<h2 class="h5 card-title mb-2">Patricia Patel</h2>
<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" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3">
<span class="fab fa-dribbble"></span>
</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: 2
}
},
navText: [
'<i class="fas fa-chevron-left"></i>',
'<i class="fas fa-chevron-right"></i>'
]
});
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 p-3">
<!-- Pricing Card -->
<div class="card bg-primary shadow-soft border-light text-center">
<!-- Header -->
<header class="card-header p-3">
<h2 class="h5 text-dark 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>
<!-- End of Pricing Card -->
</div>
<!-- Item 2 -->
<div class="item p-3">
<!-- Pricing Card -->
<div class="card bg-primary shadow-soft border-light text-center">
<!-- Header -->
<header class="card-header p-3">
<h2 class="h5 text-dark 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-primary btn-block" tabindex="0">Start
Deluxe</button>
</div>
<!-- End Content -->
</div>
<!-- End of Pricing Card -->
</div>
<!-- Item-3 -->
<div class="item p-3">
<!-- Pricing Card -->
<div class="card bg-primary shadow-soft border-light text-center">
<!-- Header -->
<header class="card-header p-3">
<h2 class="h5 text-dark 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>
<!-- 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: 2
}
},
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.