Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Bootstrap 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
Owl carousel

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 owl carousel

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
		},
		
	}
});
													
Video carousel and stage padding

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
		}
	}
});
													
Card Carousel - Center with Loop

Works well with odd and even items on screen. Keep in mind that dots don't work here like a pagination.

														
<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
		},
		
	}
});
													
Auto Height Carousel

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);