Owl Carousel multiple design example
In this article, we will be discussing an important topic that revolves around using multiple carousels or owl-carousel sliders on a single web page. The owl-carousel slider is a widely used plugin in modern websites as nowadays people access websites through multiple devices, thus, it becomes crucial to create web pages that are fully responsive and visually appealing. Here we will use bootstrap 5 and fontawesome 6 and owl carousel cdn
One of the most practical applications of a carousel slider is when you have multiple service or product rows that need to be displayed on a single row. This allows for efficient use of space while maintaining the visual appeal of the webpage.
Services section design light with icon hover - Owl Carousel
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
integrity="sha512-rqQltXRuHxtPWhktpAZxLHUVJ3Eombn3hvk9PHjV/N5DMUYnzKPC1i3ub0mEXgFzsaZNeJcoE0YHq0j/GFsdGg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"
integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="assets/css/style.css"> -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="ath_carousel_se_01">
<div class="container-fluid px-0 py-5">
<div class="container">
<div class="row">
<div class="col-md-12 px-0 pt-5">
<div class="col-sm-12 text-center">
<h2>Our services</h2>
<p class="m-0 ">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</div>
<div class="col-md-12 px-0 p-t-30 ">
<div class="owl-carousel ath_carousel_se_01_carousel owl-theme">
<!-- 1 -->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="round_icon_img">
<i class="fas fa-camera"></i>
</div>
<h3 class="mt-3"> Lorem ipsum dolor sit </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
vitae illum esse incidunt impedit consequuntur veniam. </p>
</a>
</div>
</div>
</div>
<!-- 2 -->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="round_icon_img">
<i class="fas fa-mobile"></i>
</div>
<h3 class="mt-3"> Lorem ipsum dolor sit </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
vitae illum esse incidunt impedit consequuntur veniam. </p>
</a>
</div>
</div>
</div>
<!-- 3 -->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="round_icon_img">
<i class="fas fa-laptop"></i>
</div>
<h3 class="mt-3"> Lorem ipsum dolor sit </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
vitae illum esse incidunt impedit consequuntur veniam. </p>
</a>
</div>
</div>
</div>
<!-- 4-->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="round_icon_img">
<i class="fas fa-mobile"></i>
</div>
<h3 class="mt-3"> Lorem ipsum dolor sit </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
vitae illum esse incidunt impedit consequuntur veniam. </p>
</a>
</div>
</div>
</div>
<!-- 5-->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="round_icon_img">
<i class="fas fa-tv"></i>
</div>
<h3 class="mt-3"> Lorem ipsum dolor sit </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
vitae illum esse incidunt impedit consequuntur veniam. </p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&family=Rajdhani:wght@300;400;600;700&display=swap');
body {
color: #555555;
font-family: 'Montserrat', sans-serif;
}
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: #232323;
}
a:hover {
text-decoration: none;
color: #232323;
}
.icons_cont {
text-align: center;
}
.round_icon_img {
border-radius: 50%;
box-shadow: 0 0 6px rgba(0, 0, 0, .25);
background: #fff;
width: 100px !important;
height: 100px;
padding: 16px;
margin: 15px auto !important;
}
.round_icon_img:hover {
background: #e0571d;
}
.round_icon_img:hover i {
color: #fff;
}
.round_icon_img i {
font-size: 51px;
color: #e0571d;
line-height: 66px;
}
/* ath_carousel_se_01 */
.ath_carousel_se_01 .owl-theme .owl-dots {
text-align: center;
margin-top: 18px;
}
.ath_carousel_se_01 .owl-theme .owl-dots .owl-dot {
display: inline-block;
}
.ath_carousel_se_01 .owl-theme .owl-dots .owl-dot span {
width: 12px;
height: 12px;
margin: 5px 5px;
background: #ff5e14;
border: 0px solid #ff5e14;
display: block;
transition: all 0.6s ease-in-out;
cursor: pointer;
border-radius: 50%;
}
.ath_carousel_se_01 .owl-theme .owl-dots .owl-dot:hover span {
color: #fff;
background: #ff5e14;
/* border: 5px double;*/
padding: 5px;
border-radius: 50%;
}
.ath_carousel_se_01 .owl-theme .owl-dots .owl-dot.active span {
color: #fff;
background: #ff5e14;
/* border: 5px double;*/
opacity: 0.8;
padding: 5px;
border-radius: 50%;
background: #ff5e14;
}
.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-next {
position: absolute;
top: 42%;
right: -20px;
padding: 0px 15px 6px 15px !important;
background: rgb(255, 255, 255);
display: inline-block;
transform: translateY(-50%);
border-radius: 50%;
font-size: 35px;
line-height: 35px;
color: #e0571d;
box-shadow: 0 0 8px rgba(0, 0, 0, .25);
}
.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-next:hover {
background: #ff5e14;
color: #fff;
}
.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-prev {
position: absolute;
top: 42%;
left: -20px;
padding: 0px 15px 6px 15px !important;
background: rgb(255, 255, 255);
display: inline-block;
transform: translateY(-50%);
border-radius: 50%;
font-size: 35px;
line-height: 35px;
color: #e0571d;
box-shadow: 0 0 8px rgba(0, 0, 0, .25);
}
.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-prev:hover {
background: #ff5e14;
color: #fff;
}
.ath_carousel_se_01 .owl-arrow .owl-nav {
position: absolute;
top: 0;
right: 0;
font-size: 1.8rem;
}
.ath_carousel_se_01 .owl-arrow .owl-nav .owl-prev,
.ath_carousel_se_01 .owl-arrow .owl-nav .owl-next {
display: inline-block;
transition: all 0.6s ease-in-out;
color: #000000;
}
.ath_carousel_se_01 .main_services {
position: relative;
margin: 30px 10px 40px 10px;
padding: 40px 15px 32px 15px;
overflow: hidden;
text-align: center;
border: 1px solid transparent;
border-radius: 8px 8px;
/* box-shadow: 12px 14px 0 #ececec; */
box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, .2);
min-height: 348px;
}
.ath_carousel_se_01 .main_services:hover {
border: 1px solid #ededed;
box-shadow: none;
}
@media only screen and (max-width: 768px) {
.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-prev {
top: 42%;
left: 0px;
}
.ath_carousel_se_01 .owl-carousel .owl-nav button.owl-next {
top: 42%;
right: 0px;
}
}
$(document).ready(function () {
$('.ath_carousel_se_01_carousel').owlCarousel({
items: 3,
nav: true,
loop: true,
mouseDrag: true,
responsiveClass: true,
/*navText : ["<i class='fas fa-long-arrow-alt-left'></i>","<i class='fas fa-long-arrow-alt-right'></i>"],*/
responsive: {
0: {
items: 1
},
480: {
items: 1
},
767: {
items: 2
},
992: {
items: 3
},
1200: {
items: 4
}
}
});
});
Product section design light with Image hover - Owl Carousel
<!-- Vendor CSS Files -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"
integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="assets/css/style.css"> -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="ath_carousel_se_04">
<div class="container-fluid px-0 py-5">
<div class="container ">
<div class="row">
<div class="col-sm-12 text-center">
<h2>Our Products</h2>
</div>
<div class="col-md-12 px-4 pt-0">
<div class="owl-carousel ath_carousel_se_04_carousel owl-theme">
<!-- 01 -->
<div class="item">
<div class="col-sm-12 p-2 delay-1">
<div class="">
<div class="product-image3 ath_hover">
<img src="https://bootstrapfriendly.com/demo_images/1.jpg"
class="img-fluid pic-1">
</div>
<h4 class="mt-3">Lorem ipsum dolor sit amet</h4>
</div>
</div>
</div>
<!-- 2 -->
<div class="item">
<div class="col-sm-12 p-2 delay-3">
<div class="">
<div class="product-image3 ath_hover">
<img src="https://bootstrapfriendly.com/demo_images/2.jpg"
class="img-fluid pic-1">
</div>
<h4 class="mt-3">Lorem ipsum dolor sit amet</h4>
</div>
</div>
</div>
<!-- 3 -->
<div class="item">
<div class="col-sm-12 p-2 delay-4">
<div class="">
<div class="product-image3 ath_hover">
<img src="https://bootstrapfriendly.com/demo_images/3.jpg"
class="img-fluid pic-1">
</div>
<h4 class="mt-3">Lorem ipsum dolor sit amet</h4>
</div>
</div>
</div>
<!-- 4 -->
<div class="item">
<div class="col-sm-12 p-2 delay-2">
<div class="">
<div class="product-image3 ath_hover">
<img src="https://bootstrapfriendly.com/demo_images/4.jpg"
class="img-fluid pic-1">
</div>
<h4 class="mt-3">Lorem ipsum dolor sit amet</h4>
</div>
</div>
</div>
<!-- 5 -->
<div class="item">
<div class="col-sm-12 p-2">
<div class="">
<div class="product-image3 ath_hover">
<img src="https://bootstrapfriendly.com/demo_images/5.jpg"
class="img-fluid pic-1">
</div>
<h4 class="mt-3">Lorem ipsum dolor sit amet</h4>
</div>
</div>
</div>
<!-- 6 -->
<div class="item">
<div class="col-sm-12 p-2">
<div class="">
<div class="product-image3 ath_hover">
<img src="https://bootstrapfriendly.com/demo_images/2.jpg"
class="img-fluid pic-1">
</div>
<h4 class="mt-3">Lorem ipsum dolor sit amet</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- our clients -->
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&family=Rajdhani:wght@300;400;600;700&display=swap');
body {
color: #555555;
font-family: 'Montserrat', sans-serif;
}
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: #232323;
}
h4 {
font-size: 18px;
}
a:hover {
text-decoration: none;
color: #232323;
}
/* Circle */
.ath_hover {
position: relative;
width: 100%;
height: auto;
padding: 0px !important;
overflow: hidden;
}
.ath_hover::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(244, 229, 172, .4);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.ath_hover:hover::before {
-webkit-animation: circle .75s;
animation: circle .75s;
}
.ath_hover img {
transition: all .3s;
}
.ath_hover:hover img {
transform: scale(1.2);
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
.owl-carousel .owl-nav .owl-prev:focus,
.owl-carousel .owl-nav .owl-next:focus {
outline: none;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
outline: none;
}
/*ath_carousel_se_04 start*/
.ath_carousel_se_04 {
overflow: hidden;
}
.ath_carousel_se_04 .product-grid3 {
border: none;
box-shadow: none;
}
.ath_carousel_se_04 .owl-theme .owl-dots {
text-align: center;
margin-top: 18px;
}
.ath_carousel_se_04 .owl-theme .owl-dots .owl-dot {
display: inline-block;
}
.ath_carousel_se_04 .owl-theme .owl-dots .owl-dot span {
width: 9px;
height: 9px;
margin: 4px;
border: 2px solid #94a5b4;
display: block;
-webkit-transition: opacity 200ms ease;
-moz-transition: opacity 200ms ease;
-ms-transition: opacity 200ms ease;
-o-transition: opacity 200ms ease;
transition: opacity 200ms ease;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ath_carousel_se_04 .owl-theme .owl-dots .owl-dot:hover span {
border-color: #2bb0ef;
}
.ath_carousel_se_04 .owl-theme .owl-dots .owl-dot.active span {
border-color: #2bb0ef;
}
.ath_carousel_se_04 .owl-carousel .owl-nav button.owl-next {
position: absolute;
top: 42%;
right: -20px;
padding: 0px 1px !important;
background: rgb(255, 255, 255);
display: inline-block;
transform: translateY(-50%);
border-radius: 5px;
font-size: 32px;
line-height: 32px;
color: #2bb0ef;
box-shadow: 0 0 8px rgba(0, 0, 0, .25);
}
.ath_carousel_se_04 .owl-carousel .owl-nav button.owl-next:hover {
background: #2bb0ef;
color: #fff;
}
.ath_carousel_se_04 .owl-carousel .owl-nav button.owl-prev {
position: absolute;
top: 42%;
left: -20px;
padding: 0px 1px !important;
background: rgb(255, 255, 255);
display: inline-block;
transform: translateY(-50%);
border-radius: 5px;
font-size: 32px;
line-height: 32px;
color: #2bb0ef;
box-shadow: 0 0 8px rgba(0, 0, 0, .25);
}
.ath_carousel_se_04 .owl-carousel .owl-nav button.owl-prev:hover {
background: #2bb0ef;
color: #fff;
}
.ath_carousel_se_04 .owl-arrow .owl-nav {
position: absolute;
top: 0;
right: 0;
font-size: 1.8rem;
}
.ath_carousel_se_04 .owl-arrow .owl-nav .owl-prev,
.ath_carousel_se_04 .owl-arrow .owl-nav .owl-next {
display: inline-block;
transition: all 0.6s ease-in-out;
color: #000000;
}
@media only screen and (max-width: 768px) {
.ath_carousel_se_04 .owl-carousel .owl-nav button.owl-prev {
top: 42%;
left: 0px;
}
.ath_carousel_se_04 .owl-carousel .owl-nav button.owl-next {
top: 42%;
right: 0px;
}
}
$(document).ready(function () {
$('.ath_carousel_se_04_carousel').owlCarousel({
items: 4,
nav: true,
loop: true,
mouseDrag: true,
responsiveClass: true,
navText: ["<i class='icofont-bubble-left'></i>", "<i class='icofont-bubble-right'></i>"],
responsive: {
0: {
items: 1
},
480: {
items: 2
},
767: {
items: 3
},
992: {
items: 3
},
1200: {
items: 5
}
}
});
});
Feature section design light with icon hover - Owl Carousel
<!-- Vendor CSS Files -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"
integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="ath_carousel_se_03">
<div class="container-fluid px-0 py-5">
<div class="container ">
<div class="row">
<div class="col-md-12 px-0 ">
<div class="col-sm-12 text-center">
<h2>Our Features</h2>
</div>
<div class="col-md-12 px-0 p-t-30 ">
<div class="owl-carousel ath_carousel_se_03_carousel owl-theme">
<!--1 -->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="ath_round_icon_img">
<i class="fa-solid fa-camera-rotate"></i>
</div>
<p class="mt-3"> Lorem ipsum dolor sit </p>
</a>
</div>
</div>
</div>
<!-- 2-->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="ath_round_icon_img">
<i class="fa-solid fa-laptop-file"></i>
</div>
<p class="mt-3"> Lorem ipsum dolor sit </p>
</a>
</div>
</div>
</div>
<!-- 3 -->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="ath_round_icon_img">
<i class="fa-solid fa-clapperboard"></i>
</div>
<p class="mt-3"> Lorem ipsum dolor sit </p>
</a>
</div>
</div>
</div>
<!--4 -->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="ath_round_icon_img">
<i class="fa-solid fa-camera-rotate"></i>
</div>
<p class="mt-3"> Lorem ipsum dolor sit </p>
</a>
</div>
</div>
</div>
<!-- 5-->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="ath_round_icon_img">
<i class="fa-solid fa-laptop-file"></i>
</div>
<p class="mt-3"> Lorem ipsum dolor sit </p>
</a>
</div>
</div>
</div>
<!-- 6 -->
<div class="item">
<div class="col-md-12 ">
<div class="main_services text-center">
<a href="#">
<div class="ath_round_icon_img">
<i class="fa-solid fa-clapperboard"></i>
</div>
<p class="mt-3"> Lorem ipsum dolor sit </p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 px-0 p-t-30 text-center pt-4">
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&family=Rajdhani:wght@300;400;600;700&display=swap');
body {
color: #555555;
font-family: 'Montserrat', sans-serif;
}
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: #232323;
}
a:hover {
text-decoration: none;
color: #232323;
}
.ath_round_icon_img {
border-radius: 50%;
box-shadow: 0 0 6px rgba(0, 0, 0, .25);
background: #fff;
width: 100px !important;
height: 100px;
padding: 16px;
margin: 15px auto !important;
}
.ath_round_icon_img i {
font-size: 70px;
color: #e0571d;
}
/*ath_carousel_se_03 start*/
.ath_carousel_se_03 {
overflow: hidden;
}
.ath_carousel_se_03 .product-grid3 {
border: none;
box-shadow: none;
}
.ath_carousel_se_03 .owl-carousel .owl-nav button.owl-next {
position: absolute;
top: 42%;
right: -40px;
}
.ath_carousel_se_03 .owl-carousel .owl-nav button.owl-next:hover {
background: #a5ca34;
color: #fff;
}
.ath_carousel_se_03 .owl-carousel .owl-nav button.owl-prev {
position: absolute;
top: 42%;
left: -40px;
}
.ath_carousel_se_03 .owl-carousel .owl-nav button.owl-prev:hover {
background: #a5ca34;
color: #fff;
}
.ath_carousel_se_03 .owl-arrow .owl-nav {
position: absolute;
top: 0;
right: 0;
font-size: 1.8rem;
}
.ath_carousel_se_03 .owl-carousel .owl-nav button.owl-prev,
.ath_carousel_se_03 .owl-carousel .owl-nav button.owl-next {
display: inline-block;
transition: all 0.6s ease-in-out;
color: #a5ca34;
background: rgb(255, 255, 255);
width: 35px;
height: 35px;
border-radius: 50%;
font-size: 25px;
transform: translateY(-50%);
box-shadow: 0 0 8px rgba(0, 0, 0, .25);
}
.ath_carousel_se_03 .ath_round_icon_img {
text-align: center;
line-height: 100px;
}
.ath_carousel_se_03 .ath_round_icon_img i {
font-size: 55px;
color: #a5ca34;
}
.ath_carousel_se_03 .btn-primary {
background: #a5ca34;
border-color: #a5ca34;
}
.ath_carousel_se_03 .btn-primary:hover,
.ath_carousel_se_03 .btn-primary:focus,
.ath_carousel_se_03 .btn-primary:active {
background: #708e15;
}
@media only screen and (max-width: 768px) {
.ath_carousel_se_03 .owl-carousel .owl-nav button.owl-prev {
top: 42%;
left: 0px;
}
.ath_carousel_se_03 .owl-carousel .owl-nav button.owl-next {
top: 42%;
right: 0px;
}
}
$(document).ready(function () {
$('.ath_carousel_se_03_carousel').owlCarousel({
items: 4,
nav: true,
dots: false,
loop: true,
mouseDrag: true,
responsiveClass: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
navText: ['<i class="fa-solid fa-chevron-left"></i>', '<i class="fa-solid fa-chevron-right"></i>'],
responsive: {
0: {
items: 2
},
480: {
items: 2
},
767: {
items: 3
},
992: {
items: 4
},
1200: {
items: 5
}
}
});
});
E-commerce Product Owl carousel Slider with stylish title and arrow.
<!-- Vendor CSS Files -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"
integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class=" bg-light py-5">
<div class="container">
<div class="row">
<div class="col-sm-12 ath_title_outer">
<h3 class="ath_title_inn"> Ecommerce Product </h3>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<div class="owl-carousel ath_common_slider_outer owl-theme ath_carousel_se_05_carousel">
<div class="item">
<div class="ath_item_box ">
<div class="ath_slider_img_outer">
<span class="ath_wishlist_btn">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);">
<i class="fa fa-heart"></i></a>
</span>
<a href="javascript:void(0)">
<img src="https://bootstrapfriendly.com/demo_images/1.jpg">
</a>
</div>
<h4 class="mb-1"> <a href="javascript:void(0)"> Product Name </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 500 </span>
<span class="offer-price"> Price <i class="fa fa-inr"></i> 400 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i
class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="ath_item_box ">
<div class="ath_slider_img_outer">
<span class="ath_wishlist_btn">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);">
<i class="fa fa-heart"></i></a>
</span>
<a href="javascript:void(0)">
<img src="https://bootstrapfriendly.com/demo_images/2.jpg">
</a>
</div>
<h4 class="mb-1"> <a href="javascript:void(0)"> Product Name </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 500 </span>
<span class="offer-price"> Price <i class="fa fa-inr"></i> 400 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i
class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="ath_item_box ">
<div class="ath_slider_img_outer">
<span class="ath_wishlist_btn">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);">
<i class="fa fa-heart"></i></a>
</span>
<a href="javascript:void(0)">
<img src="https://bootstrapfriendly.com/demo_images/3.jpg">
</a>
</div>
<h4 class="mb-1"> <a href="javascript:void(0)"> Product Name </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 500 </span>
<span class="offer-price"> Price <i class="fa fa-inr"></i> 400 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i
class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="ath_item_box ">
<div class="ath_slider_img_outer">
<span class="ath_wishlist_btn">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);">
<i class="fa fa-heart"></i></a>
</span>
<a href="javascript:void(0)">
<img src="https://bootstrapfriendly.com/demo_images/4.jpg">
</a>
</div>
<h4 class="mb-1"> <a href="javascript:void(0)"> Product Name </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 500 </span>
<span class="offer-price"> Price <i class="fa fa-inr"></i> 400 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i
class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="ath_item_box ">
<div class="ath_slider_img_outer">
<span class="ath_wishlist_btn">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);">
<i class="fa fa-heart"></i></a>
</span>
<a href="javascript:void(0)">
<img src="https://bootstrapfriendly.com/demo_images/5.jpg">
</a>
</div>
<h4 class="mb-1"> <a href="javascript:void(0)"> Product Name </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 500 </span>
<span class="offer-price"> Price <i class="fa fa-inr"></i> 400 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i
class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="ath_item_box ">
<div class="ath_slider_img_outer">
<span class="ath_wishlist_btn">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);">
<i class="fa fa-heart"></i></a>
</span>
<a href="javascript:void(0)">
<img src="https://bootstrapfriendly.com/demo_images/1.jpg">
</a>
</div>
<h4 class="mb-1"> <a href="javascript:void(0)"> Product Name </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 500 </span>
<span class="offer-price"> Price <i class="fa fa-inr"></i> 400 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i
class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="ath_item_box ">
<div class="ath_slider_img_outer">
<span class="ath_wishlist_btn">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);">
<i class="fa fa-heart"></i></a>
</span>
<a href="javascript:void(0)">
<img src="https://bootstrapfriendly.com/demo_images/2.jpg">
</a>
</div>
<h4 class="mb-1"> <a href="javascript:void(0)"> Product Name </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 500 </span>
<span class="offer-price"> Price <i class="fa fa-inr"></i> 400 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i
class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&family=Rajdhani:wght@300;400;600;700&display=swap');
body {
color: #555555;
font-family: 'Montserrat', sans-serif;
}
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: #232323;
}
h4 {
font-size: 18px;
}
a:hover {
text-decoration: none;
color: #232323;
}
/* slider style */
.ath_title_outer h3.ath_title_inn {
font-size: 22px;
text-transform: capitalize;
position: relative;
color: #232323;
font-weight: 700;
line-height: 1.2em;
}
.ath_title_outer h3.ath_title_inn:before {
content: "";
height: 2px;
width: 20%;
position: absolute;
left: 0px;
z-index: 1;
top: 40px;
background-color: #7d4bc5;
}
.ath_title_outer h3.ath_title_inn:after {
content: "";
height: 2px;
width: 100%;
position: absolute;
left: 0px;
top: 40px;
background-color: #d0afff;
}
.ath_common_slider_outer .owl-nav .owl-prev,
.ath_common_slider_outer .owl-nav .owl-next {
background-color: #7d4bc5 !important;
display: block;
height: 30px;
width: 30px;
text-align: center;
border-radius: 0px !important;
}
.ath_slider_img_outer {
position: relative;
}
.ath_common_slider_outer .owl-nav .owl-next {
right: -10px;
}
.ath_common_slider_outer .owl-nav .owl-prev,
.ath_common_slider_outer .owl-nav .owl-next {
top: 50%;
position: absolute;
}
.ath_common_slider_outer .owl-nav .owl-prev i,
.ath_common_slider_outer .owl-nav .owl-next i {
color: #fff;
font-size: 14px !important;
position: relative;
top: -1px;
}
.ath_common_slider_outer .owl-nav {
position: absolute;
top: -8%;
right: 10px;
width: 65px;
}
.owl-nav .owl-prev i,
.owl-nav .owl-next i {
left: 0px;
}
/*box design*/
.ath_common_slider_outer .item {
padding: 10px;
}
.ath_item_box {
padding-bottom: 5px;
border-bottom: solid 2px #7d4bc5;
background-color: #fff;
text-align: center;
padding: 0px 0 10px 0px;
margin-bottom: 10px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
transition: all .3s;
}
.ath_item_box:hover {
transform: translateY(-5px);
}
.item .ath_item_box span.ath_wishlist_btn {
right: 5px !important;
}
.ath_item_box span.ath_wishlist_btn {
position: absolute;
top: 10px;
right: 20px;
}
.ath_item_box span {
font-size: 14px;
font-weight: 600;
margin: 0px 10px;
}
.ath_item_box span.ath_wishlist_btn i {
color: #ffffff;
font-size: 20px;
text-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
}
.ath_item_box h4 {
font-size: 18px;
text-align: center;
font-weight: 500;
color: #343a40;
margin-top: 10px;
margin-bottom: 10px !important;
}
.ath_item_box .price-box {
margin-bottom: 15px !important;
}
.ath_item_box .btn {
border-radius: 50px;
padding: 5px 13px;
font-size: 15px;
color: #fff;
background-color: #7d4bc5;
font-weight: 600;
}
.ath_item_box .price-box span.price {
text-decoration: line-through;
color: #6c757d;
}
.ath_item_box span {
font-size: 14px;
font-weight: 600;
margin: 0px 10px;
}
.ath_item_box .price-box span.offer-price {
color: #28a745;
}
.ath_item_box img {
object-fit: cover;
height: 150px !important;
margin-top: 20px;
}
.ath_item_box span.ath_wishlist_btn i:hover {
color: #7d4bc5;
}
$(document).ready(function () {
$('.ath_common_slider_outer').owlCarousel({
items: 4,
nav: true,
loop: true,
mouseDrag: true,
responsiveClass: true,
navText: ['<i class="fa-solid fa-chevron-left"></i>', '<i class="fa-solid fa-chevron-right"></i>'],
responsive: {
0: {
items: 1
},
480: {
items: 2
},
767: {
items: 3
},
992: {
items: 3
},
1200: {
items: 5
}
}
});
});
