Testimonial Style 3

HTML

<section class="ts3-section" id="ts-style-3">
    <div class="ts3-container">

        <!-- Heading -->
        <div class="ts3-row">
            <div class="ts3-col">
                <h2 class="ts3-heading">
                    client testimonials
                </h2>
            </div>
        </div>
        <!-- Heading End -->

        <!-- Testimonial Carousel -->            
        <div class="ts3-row">
            <div class="ts3-col">
                <div class="ts3-carousel owl-carousel owl-theme" id="ts3-carousel">
                    
                    <!-- owl Item -->                        
                    <div class="item">
                        <div class="ts3-item-row">

                            <div class="ts3-item-col ts3-item-col-content">
                                <p class="ts3-item-desc">Amet minim mollit non deserunt ullamco est 
                                        sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud Amet minim mollit non deserunt ullamco est sit aliqu
                                </p>
                                <div class="ts3-item-profile">
                                    <h3 class="ts3-item-name">
                                        John Doe -
                                    </h3>
                                    <h4 class="ts3-item-role">
                                        position
                                    </h4>
                                    <ul class="ts3-item-rating">
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star-half-stroke"></i></li>
                                    </ul>
                                </div>
                           </div>
                           <div class="ts3-item-col ts3-item-col-image">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/person01.jpg" alt="">
                            </div>

                        </div>
                    </div>
                    <!-- owl Item End -->

                     <!-- owl Item -->                        
                     <div class="item">
                        <div class="ts3-item-row">
                           
                            <div class="ts3-item-col ts3-item-col-content">
                                <p class="ts3-item-desc">Amet minim mollit non deserunt ullamco est 
                                        sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud Amet minim mollit non deserunt ullamco est sit aliqu
                                </p>
                                <div class="ts3-item-profile">
                                    <h3 class="ts3-item-name">
                                        John Doe -
                                    </h3>
                                    <h4 class="ts3-item-role">
                                        position
                                    </h4>
                                    <ul class="ts3-item-rating">
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star-half-stroke"></i></li>
                                    </ul>
                                </div>
                           </div>
                           <div class="ts3-item-col ts3-item-col-image">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/person04.png" alt="">
                            </div>
                            
                        </div>
                    </div>
                    <!-- owl Item End -->

                     <!-- owl Item -->                        
                     <div class="item">
                        <div class="ts3-item-row">
                            
                            <div class="ts3-item-col ts3-item-col-content">
                                <p class="ts3-item-desc">Amet minim mollit non deserunt ullamco est 
                                        sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud Amet minim mollit non deserunt ullamco est sit aliqu
                                </p>
                                <div class="ts3-item-profile">
                                    <h3 class="ts3-item-name">
                                        John Doe -
                                    </h3>
                                    <h4 class="ts3-item-role">
                                        position
                                    </h4>
                                    <ul class="ts3-item-rating">
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star"></i></li>
                                        <li><i class="fa-solid fa-star-half-stroke"></i></li>
                                    </ul>
                                </div>
                           </div>
                           <div class="ts3-item-col ts3-item-col-image">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/person03.jpeg" alt="">
                            </div>
                            
                        </div>
                    </div>
                    <!-- owl Item End -->

                </div>
            </div>
        </div>
        <!-- Testimonial Carousel End -->

    </div>
</section>

CSS

 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ts3-section .ts3-heading {
    font-size: 42px;
    line-height: 1.2;
    text-transform: uppercase; 
    font-family: 'Inter', sans-serif;
    margin-bottom: 2rem;
    font-weight: 600;
    color: #436AD4;
}

.ts3-section {
    background-color: #f4f4f4;
    padding-block: 60px;
    padding-inline: 25px;
}

.ts3-container {
    max-width: 1320px;
    margin: auto;
}

.ts3-item-row {
    display: flex;
}

.ts3-item-row .ts3-item-col {
    flex: 50%;
}

.ts3-section .active .ts3-item-row {
    flex-direction: row-reverse;
}

.ts3-item-row .ts3-item-col-image img {
    height: 460px;
    object-fit: cover;
    width: 100%; 
}

.ts3-item-row .ts3-item-col-image {
    position: relative;
    z-index: 1;
}

.ts3-item-row .ts3-item-col-content {
    padding: 25px;
    display: grid;
    align-content: center;
} 

.ts3-item-row .ts3-item-col-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #0F1BBD;
    z-index: 1;
    opacity: .6;
}

.ts3-carousel .center .ts3-item-row .ts3-item-col-image::after {
    display: none;
}

.ts3-carousel .owl-stage-outer {
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

.ts3-carousel .ts3-item-desc {
    line-height: 1.4;
    font-size: 20px;
    color: #6E7096;
    font-family: 'Inter', sans-serif;
    margin-bottom: 1.5rem;
}

.ts3-item-profile .ts3-item-name {
    line-height: 1.4;
    font-size: 34px;
    font-family: 'Inter', sans-serif;
    text-transform: capitalize;
    color: #0F1BBD;
    font-weight: 600;
}

.ts3-item-profile  .ts3-item-role {
    line-height: 1.4;
    font-size: 24px;
    font-family: 'Inter', sans-serif;
    text-transform: capitalize;
    color: #0F1BBD;
    font-weight: 500;
    font-style: italic;
}

.ts3-item-rating {    
    list-style: none;
    padding-left: 0;
}

.ts3-item-rating {
    list-style: none;
    padding-left: 0;
    display: flex;
    column-gap: 5px;
    margin-block: 0.5rem;
}

.ts3-item-rating i {
    font-size: 20px;
    color: #f3e004;
}

.ts3-carousel.owl-theme .owl-dots .owl-dot.active span, 
.ts3-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background: #436ad4;
}

.ts3-carousel.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 20px;
}

.ts3-section button::after {
    display: none;
}

.ts3-section button.owl-prev {
    position: absolute;
    top: 215px;
    left: 90px;
}

#ts-style-3.ts3-section button.owl-prev:hover,
#ts-style-3.ts3-section button.owl-next:hover {
    background-color: transparent;
}

#ts-style-3.ts3-section button.owl-prev:hover i,
#ts-style-3.ts3-section button.owl-next:hover i {
    color: #ddd;
    scale: .9;
}

.ts3-section button.owl-prev i {
    color: #fff;
    font-size: 45px;
    transition: .25s;
}

.ts3-section button.owl-next i {
    color: #fff;
    font-size: 45px;
    transition: .25s;
}

.ts3-section button.owl-next {
    position: absolute;
    top: 215px;
    right: 90px;
}

#ts-style-3 .owl-nav button {
    padding:3px !important;
}

@media only screen and (max-width:991px) {
    .ts3-carousel .owl-stage-outer {
        border-top-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .ts3-section { 
        padding-inline:0px;
    }

    .ts3-section .active .ts3-item-row {
        flex-direction: column-reverse;
    }

    .ts3-item-row {
        display: flex;
        flex-direction: column-reverse;
    }

    .ts3-item-profile .ts3-item-role {
        font-size: 20px;
    }

    .ts3-item-profile .ts3-item-name {
        font-size: 28px;
    }

    .ts3-carousel .ts3-item-desc {
        font-size: 18px;
    }

    .ts3-item-row .ts3-item-col-image img {
        height: 400px;
    }

    .ts3-section .ts3-heading {
        font-size: 36px;
        padding-inline: 10px;
    }

    .ts3-section button.owl-next {
        position: absolute;
        top: 170px;
        right: 25px;
    }

    .ts3-section button.owl-prev {
        position: absolute;
        top: 170px;
        left: 25px;
    }



}

@media only screen and (max-width:600px) {
    .ts3-item-row .ts3-item-col-image img {
        height: 300px;
    }

    .ts3-section button.owl-next {
        position: absolute;
        top: 125px;
        right: 0;
    }

    .ts3-section button.owl-prev {
        position: absolute;
        top: 125px;
        left: 0;
    }
}

JS

jQuery(document).ready(function(){

    const testimonialSlider3 = jQuery('.ts3-carousel.owl-carousel');
    testimonialSlider3.owlCarousel({
        loop:true,
        nav:true,
        navText:['<i class="fa-solid fa-circle-arrow-left"></i>','<i class="fa-solid fa-circle-arrow-right"></i>'],
        dots:false,
        center:true,
        responsive:{
            0:{
                items:1.2
            },
            600:{
                items:1.5
            },
            1000:{
                items:1.5
            }
        }
    })

})

Links

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-- Owl CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>

<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

Scripts

<!-- owl carousel js jqurey  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>