aGuideHub

How to use owl carousel in bootstrap 3?

April 27, 2022

Hi Friends 馃憢,

Welcome To aGuideHub! 鉂わ笍

Today, I am going to show you. How to use owl carousel in bootstrap 3 with code example.

Here, we will use carousel slide class to make a use owl carousel in bootstrap.

Example:

Let鈥檚 look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Owl carousel with bootstrap</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
	font-family: "Open Sans", sans-serif;
}
.carousel {
	margin: 50px auto;
	padding: 0 70px;
}
.carousel .item {
	min-height: 330px;
    text-align: center;
	overflow: hidden;
}
.carousel .item .img-box {
	height: 160px;
	width: 100%;
	position: relative;
}
.carousel .item img {	
	max-width: 100%;
	max-height: 100%;
	display: inline-block;
	position: absolute;
	bottom: 0;
	margin: 0 auto;
	left: 0;
	right: 0;
}
.carousel .item h4 {
	font-size: 18px;
	margin: 10px 0;
}

.carousel .thumb-content {
	padding: 15px;
}
.carousel .carousel-control {
	height: 100px;
    width: 40px;
    background: none;
    margin: auto 0;
    background: rgba(0, 0, 0, 0.2);
}
.carousel .carousel-control i {
    font-size: 30px;
    position: absolute;
    top: 50%;
    display: inline-block;
    margin: -16px 0 0 0;
    z-index: 5;
    left: 0;
    right: 0;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: none;
    font-weight: bold;
}
.carousel .carousel-control.left i {
	margin-left: -3px;
}
.carousel .carousel-control.left i {
	margin-right: -3px;
}
.carousel .carousel-indicators {
	bottom: -50px;
}
.carousel-indicators li, .carousel-indicators li.active {
	width: 10px;
	height: 10px;
	margin: 4px;
	border-radius: 50%;
	border-color: transparent;
}
.carousel-indicators li {	
	background: rgba(0, 0, 0, 0.2);
}
.carousel-indicators li.active {	
	background: rgba(0, 0, 0, 0.6);
}

</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h1 class="text-center">Owl carousel</h1>
			<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
			<!-- Carousel indicators -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>   
			<!-- Wrapper for carousel items -->
			<div class="carousel-inner">
				<div class="item active">
					<div class="row">
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/city.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>City</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>

								</div>		
							</div>
						</div>
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/new-zealand..webp" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>New zealand</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>	
								</div>			
							</div>
						</div>		
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/rock.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>Rock</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>	
								</div>						
							</div>
						</div>								
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/royalty.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>Royalty</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>
									
								</div>						
							</div>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="row">
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/sun1.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>Sun</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>
								</div>						
							</div>
						</div>
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/star.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>Star</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>
								</div>						
							</div>
						</div>
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/lady.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>Lady</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>
								</div>						
							</div>
						</div>
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/pexels-photo-257360.jpeg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>Flower</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>
								</div>						
							</div>
						</div>						
					</div>
				</div>
				<div class="item">
					<div class="row">
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/send-flower.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>Flower</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>	
								</div>						
							</div>
						</div>
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/sky.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>Sky</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>
								</div>						
							</div>
						</div>
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/lady.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>Lady</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>
								</div>						
							</div>
						</div>	
						<div class="col-sm-3">
							<div class="thumb-wrapper">
								<div class="img-box">
									<img src="images/new-zealand.jpg" class="img-responsive" alt="">
								</div>
								<div class="thumb-content">
									<h4>New-zealand</h4>
									<p class="item-price">Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayor铆a sufri贸 alteraciones en alguna manera, ya sea porque se le agreg贸 humor,</p>
								</div>						
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Carousel controls -->
			<a class="carousel-control left" href="#myCarousel" data-slide="prev">
				<i class="fa fa-angle-left"></i>
			</a>
			<a class="carousel-control right" href="#myCarousel" data-slide="next">
				<i class="fa fa-angle-right"></i>
			</a>
		</div>
		</div>
	</div>
</div>
</body>
</html>

Check the output of the above code example.

Bootstrap, Owl, Carousel

All the best 馃憤

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts