Owl carousel center mode with zoom image

Owl carousel center mode with zoom image

in this slider the code is very simple to use. it is a new creative slide with the use of owl crousal included cursur effective zooimg image active images

 HTML 

<section class="sec sec-testimonials">
<div class="inner-testimonials">
<div class="owl-carousel custome_slide" id="slide-testimonal">
    <div class="test_img">
        <div class="main-reviewimage">
            <img src="https://images.unsplash.com/photo-1513207565459-d7f36bfa1222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1535&q=80" class="img-fluid" alt="">
        </div>
        <div class="testimonial_detail">
            <h4>Siana H</h4>
            <p>Perfect for what i needed. Found my Lenders almost instantly. who use again. </p>
        </div>
    </div>

    <div class="test_img">
        <div class="main-reviewimage">
            <img src="https://images.unsplash.com/photo-1513207565459-d7f36bfa1222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1535&q=80" class="img-fluid" alt="">
        </div>
        <div class="testimonial_detail">
            <h4>Siana H</h4>
            <p>Perfect for what i needed. Found my Lenders almost instantly. who use again. </p>
        </div>
    </div>

    <div class="test_img">
        <div class="main-reviewimage">
            <img src="https://images.unsplash.com/photo-1513207565459-d7f36bfa1222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1535&q=80" class="img-fluid" alt="">
        </div>
        <div class="testimonial_detail">
            <h4>Siana H</h4>
            <p>Perfect for what i needed. Found my Lenders almost instantly. who use again. </p>
        </div>
    </div>
</div>
</div>

</section>



More information please visit this url https://www.papawebdesigner.com/




 CSS 

<link href="http://www.24limousine.com/wp-content/themes/24Limousine/assets/css/owl.carousel.min.css" type="text/css" rel="stylesheet"/>

<style>
.sec-testimonials {
    position: relative;
}
.inner-testimonials .owl-dots {
    display: none;
}
.custome_slide.owl-carousel .owl-item.active.center .main-reviewimage {
    border: 2px solid #fff;
}
.main-reviewimage {
    border-radius: 50%;
    height: 310px;
    width: 100%;
    background: #000;
}
.main-reviewimage img {
    opacity: 0.3;
}
#slide-testimonal .active.center .main-reviewimage img {
    opacity: 1;
}
.test_img {
    position: relative;
    opacity: 1;
    -webkit-transition: .4s ease all;
    transition: .4s ease all;
    margin: 0 -48px;
    margin-top: 40px;
}
.inner-testimonials {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}
#slide-testimonal .center .test_img:before {
    content: none;
    transition: 0.7s ease-in-out;
}
.test_img img {
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto;
    height: 100%;
    object-fit: cover;
}
body {
    font-family: tahoma;
}
.custome_slide.owl-carousel .owl-item.active.center {
    transform: scale(1.3);
    margin-top: 0 !important;
    position: relative;
    z-index: 999;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.custome_slide.owl-carousel .owl-item {
    transform: scale(0.7);
    padding: 10px 0px;
    transition: all 0.5s;
}
.testimonial_detail {
    text-align: center;
}
.testimonial_detail {
    transform: scale(0.7) !important;
    width: 447px;
    position: relative;
    left: -71px;
}
.testimonial_detail h4 {
    font-size: 38px;
    margin: 0;
}
.testimonial_detail p {
    color: #ccc;
    font-size: 26px;
}
.custome_slide.owl-carousel .active .testimonial_detail {
    display: none;
}
.custome_slide.owl-carousel .active.center .testimonial_detail {
    display: block !important;
}

</style>





 JS 

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

<script src="http://www.24limousine.com/wp-content/themes/24Limousine/assets/js/owl.carousel.min.js"></script>

<script>
$('#slide-testimonal').owlCarousel({

    margin: 0,
    center: true,
    loop: true,
    nav: true,
    responsive: {
        0: {
            items: 1
        },
        768: {
            items: 2,
            margin: 15,
        },
        1000: {
            items: 3,


        }
    },

    navText: ["<img src='img/leftarrow.png'/>", "<img src='img/righttarrow.png'/>"]
});

</script>

Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/callmehitesh/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992
Follow on pinterest    -  https://in.pinterest.com/frontendissue/