Responsive Team Slider Using Bootstrap & Owl Carousel

Hello Friends, in this blog, I will share another snippet on the team card slider using bootstrap 4 and the owl carousel jQuery plugin. I have shared many code snippets on CSS animation examples, JavaScript, Webdesign, HTML CSS, jQuery plugins, etc. Please make sure to check projects as well. for this project, please follow the below video tutorial first and then come back to get the code for better understanding.

I hope you have watched the video and get some basic idea about the project. In this jQuery team slider, I have used a popular carousel plugin called owl carousel. In this team slider or team showcase with slider, I have made five different div box each contains an image and informative text relating to that image. I have used bootstrap 4 for our team slider jQuery or our team slider, to reduce the extra CSS styling. Bootstrap will help us to align all the boxes properly. We will also observe a nice-looking hover animation when we will hover over the boxes as well.

You May Also like:

Responsive Team Slider [ Source Code ]:

For this snippet, Please make two files. one is HTML file with a .html extension and, the other one is CSS file with a .css extension. add latest jQuery and owl carousel cdns in the HTML file along with the external CSS file. After that, please copy the code below from code boxes and paste them into your project.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Responsive Team Slider using Bootstrap & Owl Carousel 2</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<section id="team">
		<div class="container">
			<div class="row">
				<div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
					<div class="sec-heading text-center">
						<h6>Team Members</h6>
					</div>
				</div>
			</div>
		</div>
		<div class="testimonial-box">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<div class="team-slider owl-carousel">
							<div class="single-box text-center">
								<div class="img-area"><img alt="" class="img-fluid move-animation" src="https://i.postimg.cc/65VQDfjs/1.png"></div>
								<div class="info-area">
									<h4>Person's Name</h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ullam.</p><a href="#">Learn More</a>
								</div>
							</div>
							<div class="single-box text-center">
								<div class="img-area"><img alt="" class="img-fluid move-animation" src="https://i.postimg.cc/vmCM14qL/2.png"></div>
								<div class="info-area">
									<h4>Person's Name</h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ullam.</p><a href="#">Learn More</a>
								</div>
							</div>
							<div class="single-box text-center">
								<div class="img-area"><img alt="" class="img-fluid move-animation" src="https://i.postimg.cc/TYTxWM9S/3.png"></div>
								<div class="info-area">
									<h4>Person's Name</h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ullam.</p><a href="#">Learn More</a>
								</div>
							</div>
							<div class="single-box text-center">
								<div class="img-area"><img alt="" class="img-fluid move-animation" src="https://i.postimg.cc/593GTHB7/4.png"></div>
								<div class="info-area">
									<h4>Person's Name</h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ullam.</p><a href="#">Learn More</a>
								</div>
							</div>
							<div class="single-box text-center">
								<div class="img-area"><img alt="" class="img-fluid move-animation" src="https://i.postimg.cc/tJCrp53r/5.png"></div>
								<div class="info-area">
									<h4>Person's Name</h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ullam.</p><a href="#">Learn More</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js">
	</script> 
	<script>
	       $('.team-slider').owlCarousel({
	           loop: true,            
	           nav: false,
	           autoplay: true,
	           autoplayTimeout: 5000,
	           smartSpeed: 450,
	           margin: 20,
	           responsive: {
	               0: {
	                   items: 1
	               },
	               768: {
	                   items: 2
	               },
	               991: {
	                   items: 3
	               },
	               1200: {
	                   items: 3
	               },
	               1920: {
	                   items: 3
	               }
	           }
	       });
	</script>
</body>
</html>

ADD CSS:

body {
	font-family: 'Montserrat', sans-serif;
}
#team {
	padding: 30px 0;
}
.sec-heading h6 {
	font-family: 'Allura', cursive;
	font-size: 65px;
}
.single-box {
	border: 1px solid #ddd;
	border-radius: 20px;
	overflow: hidden;
	background-color: #fff
}
.info-area {
	padding: 0 20px 45px;
}
.img-area {
	overflow: hidden;
	padding: 15px 0 15px;
}
.img-area img {
	margin: 0 auto;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	max-width: 230px
}
.single-box:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.info-area i {
	display: inline-block;
	color: #ffb400;
	margin: 0 4px;
}
.info-area h4 {
	font-weight: 600
}
.info-area h5 {
	color: #3b04db;
	margin: 10px 0 0;
	font-weight: 600
}
.info-area a {
	display: inline-block;
	margin: 25px 0 0;
	background-color: darkorange;
	color: #fff;
	padding: 10px 35px;
	border-radius: 4px;
}
.team-slider .owl-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -60px;
	text-align: center;
	width: 100%;
}
.team-slider button.owl-dot {
	width: 16px;
	height: 16px;
	display: inline-block;
	margin: 0 6px;
	text-align: center;
	border-radius: 50%;
	background-color: #262626;
}
.team-slider .owl-dot.active {
	background-color: coral;
}
.move-animation {
	position: relative;
	-webkit-animation: move-animation 2s ease-in-out infinite;
	animation: move-animation 2s ease-in-out infinite;
}
@-webkit-keyframes move-animation {
	0% {
		top: 3px;
	}
	50% {
		top: -3px;
	}
	100% {
		top: 3px;
	}
}

I hope you have successfully created the project. Please subscribe ''divinector'' channel and press the bell notification icon for future video updates. Also, share the articles on this blog. Follow us on our social media profiles to stay connected with this blog. Thank you very much for stopping by this blog.

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Team Slider Using Bootstrap & Owl Carousel

You might like

Post a Comment

Post a Comment

Contact Form