Testimonial Style 16

Date: August 28, 2023
Developed By: Angus Nunes

#THE BEST

#IT WAS THE BEST

#IT WAS GREAT

#BEST EXPERIENCE EVER

#THE VERY BEST

#I LOVE IT

#PERFECT GETAWAY

Esther Howard

publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. n publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on.

John Doe

Jane Doe

Joe Dane

Danny Joe

Joey Doe

Dani John

View Source

HTML

<section class="testimonial-16-section" id="ts_16_id">
        <div class="ts-16-container">
            <div class="testimonials-slider-and-drag">
    
       
                <!-- FIRST CAROUSEL -->
                <div class="box-1">
                    <div class="testimonial-vertical-carousel slider owl-carousel owl-theme">
    
                        <!-- item 1 -->
                        <a href="#1" data-hash="1" class="item">
                            <div class="ts-vert-card">
                                <h4 class="ts-vt-topic">
                                    #THE BEST
                                </h4>
                            </div>
                        </a>   
                        
        
                        <!-- item 2 -->
                        <a href="#2" data-hash="2" class="item">
                            <div class="ts-vert-card">
                                <h4 class="ts-vt-topic">
                                    #IT WAS THE BEST
                                </h4>
                            </div>
                        </a>   
        
                        <!-- item 3 -->
                            <a href="#3" data-hash="3" class="item">
                                <div class="ts-vert-card">
                                    <h4 class="ts-vt-topic">
                                        #IT WAS GREAT
                                    </h4>
                                </div>
                            </a>   
                        
        
                        <!-- item 4 -->
                            <a href="#4" data-hash="4" class="item">
                                <div class="ts-vert-card">
                                    <h4 class="ts-vt-topic">
                                        #BEST EXPERIENCE EVER
                                    </h4>
                                </div>
                            </a>
        
                        <!-- item 5 -->
                            <a href="#5" data-hash="5" class="item">
                                <div class="ts-vert-card">
                                    <h4 class="ts-vt-topic">
                                        #THE VERY BEST
                                    </h4>
                                </div>
                            </a>  
        
                        <!-- item 6 -->
                            <a href="#6" data-hash="6" class="item">
                                <div class="ts-vert-card">
                                    <h4 class="ts-vt-topic">
                                        #I LOVE IT
                                    </h4>
                                </div>
                            </a>  
        
                        <!-- item 7 -->
                            <a href="#7" data-hash="7" class="item">
                                <div class="ts-vert-card">
                                    <h4 class="ts-vt-topic">
                                        #PERFECT GETAWAY
                                    </h4>
                                </div>
                            </a>   
                    </div>
                </div>
                
                    <!-- SYNCHRONIZE CAROUSEL -->
    
                <div class="box-2">
                    <div class="testimonial-horizonatal-carousel slider2 owl-carousel owl-theme">
    
                        <!-- item 1 -->
         
                        <div class="item" data-hash="1">
                            <div class="testimonial-box">
                                <div class="testimonial-16-header">
                            
                                    <h3 class="ts-16-name">
                                        Esther Howard
                                    </h3>
                                </div>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-regular fa-star-half-stroke star-rate"></i>
                                </div>
                                <div class="ts-16-desc-box">
                                    <p class="ts-16-desc-details">
                                        publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. n publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on.
                                    </p>
                                </div>
                            </div>
                            
                        </div>
                
          
        
                            <!-- item 2 -->
         
                        <div class="item" data-hash="2">
                            <div class="testimonial-box">
                                <div class="testimonial-16-header">
                                    <h3 class="ts-16-name">
                                        John Doe
                                    </h3>
                                </div>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                </div>
                                <div class="ts-16-desc-box">
                                    <p class="ts-16-desc-details">
                                        publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. n publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on.
                                    </p>
                                </div>
                            </div>
                            
                        </div>
                
                        <!-- item 3 -->
        
                        <div class="item" data-hash="3">
                            <div class="testimonial-box">
                                <div class="testimonial-16-header">
                                    <h3 class="ts-16-name">
                                        Jane Doe
                                    </h3>
                                </div>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-regular fa-star-half-stroke star-rate"></i>
                                </div>
                                <div class="ts-16-desc-box">
                                    <p class="ts-16-desc-details">
                                        publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. n publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on.
                                    </p>
                                </div>
                            </div>
                            
                        </div> 
         
        
                        <!-- item 4 -->
        
                        <div class="item" data-hash="4">
                            <div class="testimonial-box">
                                <div class="testimonial-16-header">
                                    <h3 class="ts-16-name">
                                        Joe Dane
                                    </h3>
                                </div>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                </div>
                                <div class="ts-16-desc-box">
                                    <p class="ts-16-desc-details">
                                        publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. n publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on.
                                    </p>
                                </div>
                            </div>
                            
                        </div>
         
        
                         <!-- item 5 -->
            
                        <div class="item" data-hash="5">
                            <div class="testimonial-box">
                                <div class="testimonial-16-header">
                                    <h3 class="ts-16-name">
                                         Danny Joe
                                    </h3>
                                </div>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-regular fa-star-half-stroke star-rate"></i>
                                </div>
                                <div class="ts-16-desc-box">
                                    <p class="ts-16-desc-details">
                                        publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. n publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on.
                                    </p>
                                </div>
                            </div>
                            
                        </div> 
           
        
                        <!-- item 6 -->
            
                        <div class="item" data-hash="6">
                            <div class="testimonial-box">
                                <div class="testimonial-16-header">
                                    <h3 class="ts-16-name">
                                        Joey Doe
                                    </h3>
                                </div>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-regular fa-star-half-stroke star-rate"></i>
                                </div>
                                <div class="ts-16-desc-box">
                                    <p class="ts-16-desc-details">
                                        publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. n publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on.
                                    </p>
                                </div>
                            </div>
                            
                        </div> 
         
        
                        <!-- item 7 -->

                        <div class="item" data-hash="7">
                            <div class="testimonial-box">
                                <div class="testimonial-16-header">
                                    <h3 class="ts-16-name">
                                    Dani John
                                    </h3>
                                </div>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                </div>
                                <div class="ts-16-desc-box">
                                    <p class="ts-16-desc-details">
                                    publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. n publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>    
                
            </div>
        </div>
    </section>

CSS

.testimonials-slider-and-drag{
    display: flex;
}
.ts-16-container{
    max-width: 80%;
    overflow: hidden;
    padding-top: 150px;
    margin: auto;
    text-decoration: none;
}
.box-1{
    margin-top: 30px;
}
.box-1 .owl-carousel .owl-stage{
    display: flex;
    justify-content: center;
}
.testimonial-vertical-carousel{
    max-width: 300px;
    transform: rotate(-90deg);
}
.ts-16-container .ts-vert-card{
padding-inline: 10px;
border-radius: 14px;
border: 4px solid #D9D9D9;
    color: #8D8D8D;
width: 270px;
text-align: center;
margin-right: -130px;
}
.ts-16-container .ts-vert-card .ts-vt-topic{
    font-size: 20px;
    font-family: 'roboto';
    font-weight: 700;
    padding: 10px;
    margin-bottom: 0px;
}
.box-1 .testimonial-vertical-carousel .owl-item{
    transform: rotate(90deg);      
}
.ts-16-container .ts-vert-card:hover{
    border: 4px solid #8eb2ff;
}
.ts-16-container .ts-vert-card .ts-vt-topic:hover{
    color: #8eb2ff;
}
.ts-16-container .center .ts-vert-card{
    
    border: 4px solid #3468DB;
}
.ts-16-container  .ts-vert-card .ts-vt-topic{
 color: #8D8D8D;
}
.ts-16-container .center .ts-vert-card .ts-vt-topic{
color: #3468DB;
}
.star-board-rating{
    color: #FFA800;
}
.ts-16-container .ts-16-desc-details{
    color: #000;
    font-size: 18px;
    font-family: 'roboto';
    line-height: 29.158px;
}
.star-board-rating, .testimonial-16-header{
    margin-bottom: 20px;
}
.ts-16-container a{
    text-decoration: none;
    font-family: 'roboto';
}
.box-2 .owl-theme .owl-dots {
    text-align: start;
    margin-left: 330px;
}
.testimonial-vertical-carousel .owl-stage-outer{
    height: 300px;
    padding-top: 90px;
} 
.testimonial-horizonatal-carousel .owl-carousel .owl-stage{
    overflow: hidden;
}
.box-2{
    padding-left: 70px;
}
.ts-16-desc-details::after {
    width: 83px;
    height: 14px;
    border-radius: 4px;
    background: #FFD600;
    content: '';
    display: block;
    margin-top: 30px;
}
.testimonial-box{
    box-shadow: 6px 4px 13px -5px #8D8D8D;
    margin: 20px;
    padding-inline: 20px;
    padding-block: 20px;
    width: 70%;
}
.box-1 .owl-nav{
    position: relative;
}
.ts-16-container .ts-16-name{
    color: #3468DB;
    font-family: 'roboto';
    font-size: 40px;
    
    font-weight: 700;
}
.owl-theme .owl-dots .owl-dot.active span {
    background: transparent;
}
.owl-theme .owl-dots .owl-dot:hover span{
    background:#FFD600 ;
    opacity: 50%;
}
.owl-theme .owl-dots .owl-dot span{
    background: #3468DB;
    opacity: 50%;
}
.owl-theme .owl-dots .owl-dot.active span{
    width: 10px;
    height: 10px;
    border: 2.4px solid #3468DB;
    background:#FFD600;
    opacity: 100%;
    transform: scale(1.3);
}
.ts-16-container button.owl-prev::after, .ts-16-container button.owl-next::after,
.ts-16-container button.owl-dot::after{
display: none;
}
.ts-16-container .owl-theme .owl-nav [class*='owl-']:hover {
background: transparent;
}
@media(max-width: 800px){
    .testimonials-slider-and-drag{
        display: flex;
        flex-direction: column-reverse;
    }
    .ts-16-container{
        padding-top: 50px  ;
    }
    .testimonial-vertical-carousel{
        transform: rotate(0deg);
        max-width: 100%;
        width: 600px;
    }
    .box-1 .testimonial-vertical-carousel .owl-item{
    transform: rotate(0deg);      
    }
    .testimonial-vertical-carousel .owl-stage-outer{
        height: 90px;
        padding-top: 0;
        padding-left: 0;
    }
    .box-1 {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        width: 620px;
    }
    .box-2 {
        padding-left: 0px;
        margin-top: 10px;
    }
    .box-1 a {
        display: flex;
        justify-content: center;
    }
    .box-2 .owl-item .active{
        color: #3468DB;
        border: 4px solid #3468DB;
    }
    .ts-16-desc-details {
    color: #000;
    font-size: 15px;
    line-height: 1.8;
    }
.ts-16-container .ts-vert-card{
    margin-right: 0px;
    width: 150px;
    height: 70px;
    display: flex;
    justify-content: center;
    }
    .ts-16-container .ts-vert-card .ts-vt-topic{
    font-size: 15px;
        margin-block: auto;
    }
    .box-2 .owl-theme .owl-dots {
        text-align: center;
        margin-left: 0;
    }
    .testimonial-box {
        width: 90%;
    }
}
@media(max-width: 480px){
    .testimonial-box {
    width: 80%;
        margin: 0px 0px 25px 0px;
}
    .ts-16-container .ts-16-desc-details {
    font-size: 14px;
    line-height: 24px;
}
    .ts-16-container .ts-16-name{
    font-size: 32px;
    }
    .ts-16-container .ts-vert-card{
        margin-right: 350px;
    }
}

JS

jQuery(document).ready(function(){
    
let ts_slider_16= jQuery('.slider.owl-carousel');
  ts_slider_16.owlCarousel({
  loop:true,
  margin:10,
  nav:true,
  center: true,
  mouseDrag: false,
//         touchDrag: false,
//         pullDrag: false,
  dots:false,
  center: true,
  URLhashListener:true,
  responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:3
            
        }
    }
})

 let ts_slider_16_2= jQuery('.slider2.owl-carousel');
    ts_slider_16_2.owlCarousel({
  loop:true,
  margin:10,
  nav:false,
  items:1,
  dots:true,
  URLhashListener:true
})    
    
    
});

Links

     <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 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

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>