Owl Carousel multiple design example

Services section design light with icon hover - Owl Carousel

Try It

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/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

Try It

<!-- Vendor CSS Files -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/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

Try It

<!-- Vendor CSS Files -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/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.

Try It

<!-- Vendor CSS Files -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/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
            }
        }
    });
});

Owl Carousel multiple design example

Services section design light with icon hover - Owl Carousel

Product section design light with Image hover - Owl Carousel

Related Post

Skeleton Pre Loader Example - How to create a skeleton loader screen using HTML CSS

Swiper Slider ecommerce design template

Feature section design light with icon hover - Owl Carousel

E-commerce Product Owl carousel Slider with stylish title and arrow.

Leave a comment

Feature Posts

How to export database data into excel in csv format using PHP

Login and Registration System in PHP and MySQL with oops concept

how to make bootstrap modal draggable and resizable

Uploading Multiple Files with Progress Bar via Ajax and PHP

How to export HTML table Data to CSV using only JavaScript?

Real-time wall clock using Javascript and CSS

Creating Dynamic PHP Event Management Calander using AJAX and Bootstrap

Upload Multiple Files with Progress Bar using Ajax and PHP

Enable Disable Customise and set Date Selection Using JQuery UI Datepicker

Swiper Slider Navigation with Mouse Wheel and Hamburger Menu