Introduction
Owl carousel is a jQuery plugin that lets you create a beautiful touchable slider. You can click the carousel and drag the left or right direction.
In this tutorial, we will be using the owl carousel library to showcase the images. Owl carousel has many features like customizable, responsive, drag and drop support, and modern browser support. It has been chosen as the number one jQuery plugin by hundreds of developers all around the world. JQuery is a JavaScript library designed to simplify html. It is small, lightweight but powerful.
Using jQuery we can add different types of effect in our webpage. To use this project, you must first download the owl carousel library from the official website. After that you must add owlcarouse.min.css and js link in your html file. In this project we use google fonts, font awesome, bootstrap, carousel, custom CSS and js, etc. We create the markup using html code. See the code below.
Applying the carousel library
index.html
<!DOCTYPE html>
<html>
<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</title>
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,500,500i,600,600i,700,700i,800,800i" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl-carousel/owl.theme.default.min.css">
<!-- Style CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="#team">
<div class="content-box">
<div class="content-title">
<h3> Owl Carousel JS effect </h3>
<div class="content-title-underline"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="team-members" class="owl-carousel owl-theme">
<div class="team-member">
<img src="img/team/team-1.jpg" alt="team member" class="img-responsive">
<div class="team-member-info text-center">
<h4 class="team-member-name">Daniel Moore</h4>
<h4 class="team-member-designation">CEO</h4>
<ul class="social-list">
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="img/team/team-2.jpg" alt="team member" class="img-responsive">
<div class="team-member-info text-center">
<h4 class="team-member-name">Jack Hanma</h4>
<h4 class="team-member-designation">Developer</h4>
<ul class="social-list">
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="img/team/team-3.jpg" alt="team member" class="img-responsive">
<div class="team-member-info text-center">
<h4 class="team-member-name">Daniel Jack</h4>
<h4 class="team-member-designation">Software engineer</h4>
<ul class="social-list">
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="img/team/team-4.jpg" alt="team member" class="img-responsive">
<div class="team-member-info text-center">
<h4 class="team-member-name">Daniel Moore</h4>
<h4 class="team-member-designation">Designer</h4>
<ul class="social-list">
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="img/team/team-5.jpg" alt="team member" class="img-responsive">
<div class="team-member-info text-center">
<h4 class="team-member-name">Daniel </h4>
<h4 class="team-member-designation">CTO</h4>
<ul class="social-list">
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/owl-carousel/owl.carousel.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
After finishing the html we style the webpage using CSS and JavaScript. The project has a simple layout with a topic and images. The image has a carousel effect, we can drag the images using mouse click on left and right directions.
style.css
html,
body {
height: 100%;
}
body {
font-family: "Roboto Condensed", sans-serif;
}
p {
color: #64707b;
font-size: 16px;
font-weight: 300;
}
h3 {
color: #41464b;
text-transform: uppercase;
}
.content-box {
padding: 60px 0 60px 0;
}
.content-title h3 {
font-size: 30px;
font-weight: 700;
text-align: center;
margin: 0 0 30px 0;
}
.content-title-white h3 {
color: #fff;
}
.content-title-underline {
width: 200px;
height: 3px;
background-color: #34c6d3;
margin: 0 auto 30px auto;
}
.team-member {
margin: 0 15px;
}
.team-member-info {
padding: 10px 0 30px 0;
}
h4.team-member-name {
font-size: 22px;
font-weight: 700;
letter-spacing: 1px;
padding: 10px;
}
h4.team-member-designation{
color: #34c6d3;
font-size: 15px;
font-weight: 700;
font-style: italic;
letter-spacing: 1px;
margin-top: 5px;
}
.social-list {
padding: 0;
}
.social-list li {
list-style: none;
display: inline-block;
width: 32px;
height: 32px;
margin-right: 6px;
margin-top: 10px;
}
.social-icon {
font-size: 20px;
}
.icon-grey i {
color: #64707b;
}
.social-icon i:hover {
color: #34c6d3;
}
While using owl carousel you must write the JavaScript code as mentioned on the official website.
script.js
$(function() {
$("#team-members").owlCarousel({
items: 3,
autoplay: true,
smartSpeed: 800,
loop: true,
autoplayHoverPause: true
});
});
How to use this project?
- Download the code or copy the codes to your respective folder.
- Open the folder in your code editor. (vs code, atom, sublime text)
- Execute the index.html file on the browser. (chrome, firefox)
- Use the project.
Click the button below to get the source code for this project.
Maximize Your Productivity with a 3D Printer
3d printer price [url=http://www.3d-ruyter53.ru/]http://www.3d-ruyter53.ru/[/url] .
Nice blog here Also your site loads up very fast What host are you using Can I get your affiliate link to your host I wish my site loaded up as quickly as yours lol
I do trust all the ideas youve presented in your post They are really convincing and will definitely work Nonetheless the posts are too short for newbies May just you please lengthen them a bit from next time Thank you for the post
you are in reality a just right webmaster The site loading velocity is incredible It seems that you are doing any unique trick In addition The contents are masterwork you have performed a wonderful task on this topic