Team Slider Style 9

HTML

<section class="team-slider-9">
    <div class="tsl-container">
        <div class="section-title">
            <h1 class="tsl-main-heading">
              Our Team
            </h1>
            <h3 class="tsl-sub-heading">
                Meet our team members
            </h3>
        </div>
        <div class="tsl-8-team-cards owl-carousel owl-theme">

            <!-- item 1 -->
            <div class="item">
                <div class="tsl-9-team-member">
                    <div class="tsl-9-teammate-profile">
                        <div class="white-shadow">
                            <div class="tsl-9-teammate-img">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/alejandro-gomez.png" alt="">
                            </div>
                        </div>
                        
                    </div>
                        <div class="tsl-9-teammate-credentials">
                            <h3>Alejandro Gomez</h3>
                            <p>UI/UX Designer</p>
                        </div>
                    
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-facebook icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-linkedin icon"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- item 2 -->
            <div class="item">
                <div class="tsl-9-team-member">
                    <div class="tsl-9-teammate-profile">
                        <div class="tsl-9-teammate-img">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/alejandro-gomez.png" alt="">
                            <div class="white-shadow">
                            </div>
                        </div> 
                    </div>
                        <div class="tsl-9-teammate-credentials">
                            <h3>Gina Latina</h3>
                            <p>Content Writer</p>
                        </div>
                    
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-facebook icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-linkedin icon"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- item 3 -->
            <div class="item">
                <div class="tsl-9-team-member">
                    <div class="tsl-9-teammate-profile">
                        <div class="white-shadow">
                            <div class="tsl-9-teammate-img">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/alejandro-gomez.png" alt="">
                            </div>
                        </div>
                        
                    </div>
                        <div class="tsl-9-teammate-credentials">
                            <h3>Aman Gupta</h3>
                            <p>Front-End Developer</p>
                        </div>
                    
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-facebook icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-linkedin icon"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- item 4 -->
            <div class="item">
                <div class="tsl-9-team-member">
                    <div class="tsl-9-teammate-profile">
                        <div class="white-shadow">
                            <div class="tsl-9-teammate-img">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/alejandro-gomez.png" alt="">
                            </div>
                        </div>
                        
                    </div>
                        <div class="tsl-9-teammate-credentials">
                            <h3>Ahmed Sheraz</h3>
                            <p>Manager</p>
                        </div>
                    
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-facebook icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-linkedin icon"></i>
                        </a>
                    </div>
                </div>
            </div>
            

            <!-- item 5 -->
            <div class="item">
                <div class="tsl-9-team-member">
                    <div class="tsl-9-teammate-profile">
                        <div class="white-shadow">
                            <div class="tsl-9-teammate-img">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/alejandro-gomez.png" alt="">
                            </div>
                        </div>
                        
                    </div>
                        <div class="tsl-9-teammate-credentials">
                            <h3>Adrian Washington</h3>
                            <p>CHRO</p>
                        </div>
                    
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-facebook icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-linkedin icon"></i>
                        </a>
                    </div>
                </div>
            </div>


            <!-- item 6 -->
            <div class="item">
                <div class="tsl-9-team-member">
                    <div class="tsl-9-teammate-profile">
                        <div class="white-shadow">
                            <div class="tsl-9-teammate-img">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/alejandro-gomez.png" alt="">
                            </div>
                        </div>
                        
                    </div>
                        <div class="tsl-9-teammate-credentials">
                            <h3>Hansel Green</h3>
                            <p>Regional Head</p>
                        </div>
                    
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-facebook icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-linkedin icon"></i>
                        </a>
                    </div>
                </div>
            </div>


            <!-- item 7 -->
            <div class="item">
                <div class="tsl-9-team-member">
                    <div class="tsl-9-teammate-profile">
                        <div class="white-shadow">
                            <div class="tsl-9-teammate-img">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/alejandro-gomez.png" alt="">
                            </div>
                        </div>
                        
                    </div>
                        <div class="tsl-9-teammate-credentials">
                            <h3>Gema Saputera</h3>
                            <p>UI/UX Designer</p>
                        </div>
                    
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-facebook icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-linkedin icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

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

.team-slider-9 h1, 
.team-slider-9 h2, 
.team-slider-9 h3, 
.team-slider-9 h4, 
.team-slider-9 h5, 
.team-slider-9 h6{
    font-family: 'Noto Sans';
}
.team-slider-9 p{
    font-family: 'poppins';
}
.team-slider-9 a{
    text-decoration: none;
}
.team-slider-9{
    margin: auto;
    background-color: #DDDDDD;
    max-width: 1320px;
    border-radius: 50px;
    padding-block: 50px;
}
.tsl-container{
    max-width: 80%;
    margin: auto;
}
.tsl-9-teammate-credentials{
    margin-top: 10px;
}
.tsl-9-teammate-credentials h3{
    color: #FF46D6;
    font-size: 25px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-align: center;
    margin-bottom:5px;
}
.tsl-9-teammate-credentials p{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-align: center;
    margin-bottom:5px;
}
.tsl-main-heading{
    color: #000;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.tsl-sub-heading{
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.team-slider-9 .section-title{
    border-left: 11px solid #F1BC25;
    padding: 0 0 0 15px;
    width: fit-content;
}
.team-slider-9 .icon{
    margin-inline: 5px;
    color: #333;
}
.tsl-8-social-media{
    text-align: center;
    font-size: 25px;
    margin-top: 10px;
}
.tsl-9-teammate-profile{
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: auto;
    background: #e2e2e2;
    position: relative;
}
.tsl-9-teammate-profile::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    box-shadow: -6px 7px 10px 0px rgba(3, 3, 3, 0.35) inset;
}
.tsl-9-teammate-profile::after{
    content: '';    
    position: absolute;
    border-radius: 50%;
    width: 203px;
    height: 203px;
    box-shadow: 6px -8px 11px 2px #ffffff inset;
    z-index: 99;
    top: 0px;
    left: -2px;
}
.team-slider-9 .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    border-radius: 50%;
}
.tsl-9-teammate-img{
    overflow: hidden;
}
.tsl-8-team-cards{
    margin-top: 70px;
}
.team-slider-9 .icon:hover{
    color: #FF46D6;
}
.team-slider-9 .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots span {
    background: #FF46D6;
}
.team-slider-9 .owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 40px;
}
.team-slider-9 .owl-theme .owl-dots .span{
    background: #FF46D6;
    opacity: 0.5;
}

@media(max-width:993px){
    .tsl-main-heading, .tsl-sub-heading{
       text-align: center;
    }   
    .team-slider-9 .section-title {
        border-left: none;
        border-bottom: 5px solid #F1BC25;
        padding: 0 0 5px 0px;
        width: fit-content;
        margin: auto;
    }
}

JS

jQuery(document).ready(function(){

let teamSlider9 = jQuery('.team-slider-9 .owl-carousel');
teamSlider9.owlCarousel({    
    loop:true,
    margin:10,
    nav:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:3
        }
    }
});

});

Links

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    
<!-- carousels and animations -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"/>

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

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/brands.min.css">

Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/animateCSS/1.2.2/jquery.animatecss.min.js"></script>