Team Slider Style 8

HTML

<section class="team-slider-8">
    <div class="tsl-container">
        <h3 class="tsl-pre-heading">
            Our Team!
        </h3>
        <h1 class="tsl-main-heading">
            We Are A Team!
        </h1>
        <p class="tsl-title-desc">
            A Private Limited is the most popular type of partnership Malta. The limited liability is, in fact, the only type of company allowed by Companies.
        </p>
        <div class="tsl-8-team-cards owl-carousel owl-theme">

            <!-- item 1 -->
            <div class="item">
                <div class="tsl-8-team-member">
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-instagram icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-square-facebook icon"></i>
                        </a>
                    </div>
                    <div class="tsl-8-teammate-profile">
                        <div class="tsl-8-teammate-img">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/cody-fisher.png" alt="" class="prof-pic">
                        </div>
                        <div class="tsl-8-teammate-credentials">
                            <h3>Ahmed Sheraz</h3>
                            <p>Owner</p>
                        </div>
                    </div>
                </div>
            </div>


            <!-- item 2 -->
            <div class="item">
                <div class="tsl-8-team-member">
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-instagram icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-square-facebook icon"></i>
                        </a>
                    </div>
                    <div class="tsl-8-teammate-profile">
                        <div class="tsl-8-teammate-img">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/cody-fisher.png" alt="" class="prof-pic">
                        </div>
                        <div class="tsl-8-teammate-credentials">
                            <h3>Gema Saputera</h3>
                            <p>Designer</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- item 3 -->
            <div class="item">
                <div class="tsl-8-team-member">
                    <div class="tsl-8-social-media">
                        <a href="#">
                            <i class="fa-brands fa-twitter icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-instagram icon"></i>
                        </a>
                        <a href="#">
                            <i class="fa-brands fa-square-facebook icon"></i>
                        </a>
                    </div>
                    <div class="tsl-8-teammate-profile">
                        <div class="tsl-8-teammate-img">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/cody-fisher.png" alt="" class="prof-pic">
                        </div>
                        <div class="tsl-8-teammate-credentials">
                            <h3>Richard Neilson</h3>
                            <p>UI Researcher</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

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

.team-slider-8 h1, 
.team-slider-8 h2, 
.team-slider-8 h3, 
.team-slider-8 h4, 
.team-slider-8 h5, 
.team-slider-8 h6{
    font-family: 'roboto';
}
.team-slider-8 p{
    font-family: 'poppins';
}

section.team-slider-8{
    background: #343F4B;
    padding-block: 50px;
}

.tsl-container {
    padding-top: 30px;
    max-width: 100%;
    margin: auto;
    position: relative;
}

.tsl-8-team-cards{
    margin-top: 50px;
}
.tsl-8-team-member{
    display: flex;
    justify-content:center;
}
.tsl-pre-heading{
    color: #0076A3;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}
h1.tsl-main-heading{
    color: #FFF;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}
p.tsl-title-desc{
    color: #a5abb5;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 50%;
    margin: auto;
}
.team-slider-8 .prof-pic{
    max-width: 230px;
}
.tsl-8-teammate-credentials{
    width: fit-content;
    margin: 10px auto;
}
.tsl-8-teammate-credentials h3{
    color: #FFF;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-inline: 10px;
}
.tsl-8-teammate-credentials p{
    color: #a5abb5;
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
}
.tsl-8-social-media{
    display: grid;
    justify-content: space-between;
    margin: 55px 20px;
    text-align: center;
}
.team-slider-8 .icon{
    color: white;
    transform: scale(2.0);
}
.team-slider-8 .icon:hover{
    color: #64a0ef;
}
.team-slider-8 .owl-nav .owl-prev{
    background: white;
}
.team-slider-8 .owl-nav .owl-next{
    background: white;
}
.team-slider-8 .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot{
    color: white;
}
.team-slider-8 .owl-theme .owl-nav [class*='owl-']:hover {
    background: none;
    color: #FFF;
    text-decoration: none;
}
@media (max-width:993px){
    p.tsl-title-desc{
        width: 80%;
    }
    .tsl-8-team-member{
        display: flex;
        margin: auto;
        justify-content: center;
    }
   .team-slider-8  .owl-theme .owl-nav [class*='owl-']:hover {
        background: none;
        color: #FFF;
        text-decoration: none;
        }
}

@media (max-width:600px){

 .tsl-8-team-member {
    margin-left: -50px;
 }

}

JS

jQuery(document).ready(function(){

let teamSlider8 = jQuery('.team-slider-8 .owl-carousel');

teamSlider8.owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    navText:["<i class='fa-solid fa-chevron-left'></i>","<i class='fa-solid fa-chevron-right'></i>"],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:4
        }
    }
});

});

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">

<!-- 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/animateCSS/1.2.2/jquery.animatecss.min.js"></script>

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