A slideshow component for cycling through elements—images or slides of text—like a carousel.
Carousel works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="dist/img/slide1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">First Slide Label</h5>
<p>This is content paragraph enough to say.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="dist/img/slide2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">Second Slide Label</h5>
<p>This is content paragraph enough to say.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="dist/img/slide3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">Third Slide Label</h5>
<p>This is content paragraph enough to say.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Name | description |
---|---|
data-bs-ride="carousel" |
Actives the carousel functionality |
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
<div id="owl_demo_1" class="owl-carousel owl-theme">
<div class="item"><img src="dist/img/slide2.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide4.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide5.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide1.jpg" alt="Owl Image"></div>
</div>
<!-- Owl JavaScript -->
<script src="vendors/owl.carousel/dist/owl.carousel.min.js"></script>
$("#owl_demo_1").owlCarousel({
items : 1,
});
Responsive option can be used for setting breakpoints and additional options within. Try changing your browser width to see.
<div id="owl_demo_2" class="owl-carousel owl-theme">
<div class="item"><img src="dist/img/slide1.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide2.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide3.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide4.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide5.jpg" alt="Owl Image"></div>
<div class="item"><img src="dist/img/slide6.jpg" alt="Owl Image"></div>
</div>
$('#owl_demo_2').owlCarousel({
margin:20,
autoplay:true,
responsiveClass:true,
responsive:{
0:{
items:1
},
480:{
items:2
},
800:{
items:4
},
}
});
Stage padding option adds left and right padding style (in pixels) onto stage-wrapper.
<div id="owl_demo_3" class="owl-carousel theme-owl-dots owl-theme">
<div class="item-video">
<a class="owl-video" href="https://vimeo.com/163109106"></a>
</div>
<div class="item-video">
<a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a>
</div>
<div class="item-video">
<a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a>
</div>
<div class="item-video">
<a class="owl-video" href="https://www.youtube.com/watch?v=H3jLkJrhHKQ"></a>
</div>
<div class="item-video">
<a class="owl-video" href="https://www.youtube.com/watch?v=g3J4VxWIM6s"></a>
</div>
<div class="item-video">
<a class="owl-video" href="https://www.youtube.com/watch?v=EF_kj2ojZaE"></a>
</div>
</div>
$('#owl_demo_3').owlCarousel({
items:1,
merge:true,
loop:true,
margin:10,
stagePadding: 50,
video:true,
videoWidth: 267,
videoHeight: 150,
autoWidth:true,
lazyLoad:false,
center:true,
responsive:{
480:{
items:2
},
600:{
items:4
}
}
});
Works well with odd and even items on screen. Keep in mind that dots don't work here like a pagination.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div id="owl_demo_4" class="owl-carousel owl-theme">
<div class="item">
<div class="card">
<img class="card-img-top" src="dist/img/slide1.jpg" alt="Card image cap">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="item">
<div class="card">
<img class="card-img-top" src="dist/img/slide2.jpg" alt="Card image cap">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="item">
<div class="card">
<img class="card-img-top" src="dist/img/slide3.jpg" alt="Card image cap">
<div class="card-body">
<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>
</div>
</div>
</div>
<div class="item">
<div class="card">
<img class="card-img-top" src="dist/img/slide4.jpg" alt="Card image cap">
<div class="card-body">
<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>
</div>
</div>
</div>
</div>
$('#owl_demo_4').owlCarousel({
center: true,
loop:true,
margin:30,
responsiveClass:true,
responsive:{
0:{
items:1
},
480:{
items:2
},
800:{
items:3
},
}
});
To enable use autoHeight: true
. At the moment works only with 1 item on screen. The plan is to calculate all visible items and change height according to heighest item.
<div class="card bg-primary text-center">
<div class="twitter-slider-wrap card-body">
<div class="twitter-icon text-center mb-3">
<i class="fab fa-twitter"></i>
</div>
<div id="tweets_fetch" class="owl-carousel light-owl-dots owl-theme"></div>
</div>
</div>
if( $('#tweets_fetch').length > 0 ){
var configList = {
"profile": {"screenName": 'envato'},
"domId": 'tweets_fetch',
"maxTweets": 2,
"enableLinks": true,
"showUser": false,
"showTime": true,
"showImages": false,
"showInteraction":false,
"lang": 'en'
};
twitterFetcher.fetch(configList);
}
});
setTimeout(function(){
$('#tweets_fetch').owlCarousel({
loop:true,
margin:0,
autoplay:true,
responsiveClass:true,
autoHeight:true,
autoplayTimeout:4000,
responsive:{
0:{
items:1
}
}
});
},2000);