A carousel slider is an essential element for any modern website, and the Owl-carousel Cards Slider is a great solution for those looking for an interactive and visually appealing way to showcase content. This slider uses HTML, CSS, and jQuery to create a slideshow of cards that rotate horizontally. In this article, we will cover the basics of HTML, CSS, and jQuery and how they work together to create a dynamic and engaging carousel slider.
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It provides the structure and content of a web page, allowing web developers to create and format text, images, videos, and other elements. HTML is made up of a series of tags that are used to define the different parts of a web page.
CSS (Cascading Style Sheets) is a stylesheet language used to style and format HTML content. CSS is used to set the colors, fonts, spacing, and other design elements for a web page. CSS is also used to control the layout and positioning of HTML elements.
jQuery is a fast, small, and feature-rich JavaScript library. It is used to make web development faster, easier, and more interactive. jQuery is used to add interactivity and animations to web pages, making them more engaging for users. In the case of the Owl-carousel Cards Slider, jQuery is used to control the animations and transitions between cards.
Owl-carousel development
To create an Owl-carousel Cards Slider, you first need to create three files one HTML, CSS and jQuery file. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that you are going to use, otherwise images won’t appear.
<!DOCTYPE html>
<!-- Created By WPHotshot -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Owl-carousel Cards Slider | WPHotShot</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>
<div class="slider owl-carousel">
<div class="card">
<div class="img">
<img decoding="async" src="Img/pic3.jpg" alt="">
</div>
<div class="content">
<div class="title">
Purvika Arora
</div>
<div class="sub-title">
Graphic Designer
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.
</p>
<div class="btn">
<button>Read more</button>
</div>
</div>
</div>
<div class="card">
<div class="img">
<img decoding="async" src="Img/pic1.jpg" alt="">
</div>
<div class="content">
<div class="title">
Neha Singh
</div>
<div class="sub-title">
Web Developer
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.
</p>
<div class="btn">
<button>Read more</button>
</div>
</div>
</div>
<div class="card">
<div class="img">
<img decoding="async" src="Img/pic2.jpg" alt="">
</div>
<div class="content">
<div class="title">
Divya Sharma
</div>
<div class="sub-title">
App Developer
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit modi dolorem quis quae animi nihil minus sed unde voluptas cumque.
</p>
<div class="btn">
<button>Read more</button>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
text-align: center;
background: -webkit-linear-gradient(#2832d4, #7209d4);
}
.slider{
max-width: 1100px;
display: flex;
}
.slider .card{
flex: 1;
margin: 0 10px;
background: #fff;
border: 2px solid #fff;
}
.slider .card .img{
height: 200px;
width: 100%;
}
.slider .card .img img{
height: 100%;
width: 100%;
object-fit: cover;
}
.slider .card .content{
padding: 10px 20px;
background-color: #e2e8f0;
}
.card .content .title{
font-size: 25px;
font-weight: 600;
color: #2832d4;
}
.card .content .sub-title{
font-size: 20px;
font-weight: 600;
color: #7209d4;
line-height: 20px;
}
.card .content p{
text-align: justify;
margin: 10px 0;
}
.card .content .btn{
display: block;
text-align: left;
margin: 10px 0;
}
.card .content .btn button{
background: -webkit-linear-gradient(right, #2832d4, #7209d4);
color: #fff;
border: none;
outline: none;
font-size: 17px;
padding: 5px 8px;
border-radius: 5px;
cursor: pointer;
transition: 0.2s;
}
.card .content .btn button:hover{
transform: scale(0.9);
}
Lastly, create a jQuery file with the name of main.js and paste the given codes in your jQuery file. Remember, you’ve to create a file with .js extension.
$(".slider").owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2000, //2000ms = 2s;
autoplayHoverPause: true,
});
That’s all, now you’ve successfully created an Owl-carousel Cards Slider in HTML CSS & jQuery. If your code doesn’t work or you’ve faced any error/problem then please feel free to contact us.
Find more tutorials regarding Web Development here.
