OWL Carousel is a touch-enabled jQuery plugin that allows you to create beautiful responsive carousel sliders. A carousel is a collection of rotating banners, or a slideshow, that represents on the homepage of your store. It lets you display up to five slides consisting of images and text, which can be linked to particular products or pages.
Today in this blog I'll share this program (OWL Carousel Cards Slider). In this program, there are three profile-cards on the webpage and after every 2 seconds, they slide automatically and we can also slide each card in any direction (right or left).
You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes because you won't get images if you copy the codes. Click here to download code files.
You might like this:
Image Slider with Slide Controls
Responsive Owl-carousel Slider
Image Clip Animation with Sliders
Awesome Image Comparison Slider
HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Owl-carousel Cards Slider | CodingNepal</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 src="#" alt=""></div>
<div class="content">
<div class="title">
Briana Tozour</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 src="#" alt=""></div>
<div class="content">
<div class="title">
Pricilla Preez</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 src="#" alt=""></div>
<div class="content">
<div class="title">
Eliana Maia</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>
$(".slider").owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2000, //2000ms = 2s;
autoplayHoverPause: true,
});
</script>
</body>
</html>
CSS CODE:
@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: #f2f2f2;
}
.slider{
max-width: 1100px;
display: flex;
}
.slider .card{
flex: 1;
margin: 0 10px;
background: #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;
}
.card .content .title{
font-size: 25px;
font-weight: 600;
}
.card .content .sub-title{
font-size: 20px;
font-weight: 600;
color: #e74c3c;
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: #e74c3c;
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);
}
Top comments (0)