Hello visitors, now in this blog you’ll learn to produce Owl-carousel with Image or Card slider HTML that is utilizing CSS jQuery. Earlier We have provided a blog about how to produce a graphic slider with settings or buttons which can be toggle. Today it is time for you to create an owl carousel slider.
 |
| Owl-carousel Cards Slider in HTML CSS & jQuery |
OWL Carousel is really a jQuery that is touch-enabled that enables you to definitely develop beautiful responsive carousel sliders. A carousel is a number of rotating ads, or a slideshow, that represents from the homepage of the shop. It enables you to display up to five slides composed of pictures and text, which is often linked to items that are certain pages.
In this blog I’ll share with this program (OWL Carousel Cards Slider) today. In this system, you can find three cards which are profile the webpage and after every 2 seconds, they slide immediately and now we may also slip each card in every direction (right or remaining).
If you’re experience difficult to understand what i'm saying. You can view a video clip that is full on this program (OWL Carousel Cards Slider).
Video Tutorial of OWL Carousel Cards Slider in jQuery
Coming Soon...
You'll be able to also produce these kind of carousel programs if you’re a beginner and you’ve base level knowledge of HTML & CSS. There are not any vast codes on this program to produce it, there is certainly just the use of the jQuery plugin allowing us to create carousel that is beautiful.
If you want this planned program(OWL Carousel Cards Slider) and want to get supply codes. It is possible to get the origin rules of this system. To obtain the source codes you just need certainly to scroll down. You can use this carousel that is pre-built on your own jobs and web pages.
OWL Carousel Slider in jQuery [Source Codes]
To create this planned program(OWL Carousel Cards Slider). First, you ought to create two Files one HTML File and a different one is CSS File. After generating these data only paste the codes being following your file.
Initially, develop an HTML file utilizing the true title of index.html and paste the given codes in your HTML file. Remember, you’ve to produce a file with .html extension plus the pictures which can be used on these cards won’t appear. You’ve to files which are install the given grab button to make use of images additionally.
<!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">
Alex 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>Second, create a CSS file with all the true name of style.css and paste the given rules in your CSS file. Keep in mind, you’ve to make 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: #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: #f80000;
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: #ff0000;
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);
}That’s all, now you’ve successfully developed an Owl-carousel Cards Slider in HTML CSS & jQuery. Then please download the origin code data from the given install key in the event your code doesn’t work or you’ve experienced any error/problem. It’s free and a .zip File will probably be downloaded then you’ve to extract it.
Post a Comment