//bestjquery.com

<!-- testimonial -->
<section id="testimonial" class="sectionPadding">
	<div class="container">
		<div class="row">

				<div class="sectionTitle center mb-50">
					<h4>Our Client Reviews</h4>
					<h3><span>OUR</span> TESTIMONIALS</h3>

			</div>
		</div>
		<div class="row center">
			<div class="testimonialWraper center slider-for">
				<div class="testimonialDtl">
					<img src="images/slider-1.jpg" alt="" class="img-responsive">
				</div>
				<div class="testimonialDtl">
					<img src="images/slider-1.jpg" alt="" class="img-responsive">
				</div>
				<div class="testimonialDtl">
					<img src="images/slider-1.jpg" alt="" class="img-responsive">
				</div>
				<div class="testimonialDtl">
					<img src="images/slider-1.jpg" alt="" class="img-responsive">
				</div>
				<div class="testimonialDtl">
					<img src="images/slider-1.jpg" alt="" class="img-responsive">
				</div>
				<div class="testimonialDtl">
					<img src="images/slider-1.jpg" alt="" class="img-responsive">
				</div>
				<div class="testimonialDtl">
					<img src="images/slider-1.jpg" alt="" class="img-responsive">
				</div>
			</div>

				<div class="clientImg slider-nav">
					<div class="clientThumb center">
						<img src="images/customer.png" alt="">
					</div>
					<div class="clientThumb center">
						<img src="images/team-02.jpg" alt="">
					</div>
					<div class="clientThumb center">
						<img src="images/team-03.jpg" alt="">
					</div>
					<div class="clientThumb center">
						<img src="images/team-02.jpg" alt="">
					</div>
					<div class="clientThumb center">
						<img src="images/team-02.jpg" alt="">
					</div>
					<div class="clientThumb center">
						<img src="images/team-02.jpg" alt="">
					</div>
					<div class="clientThumb center">
						<img src="images/team-02.jpg" alt="">
					</div>
					<div class="clientThumb center">
						<img src="images/team-02.jpg" alt="">
					</div>
					<div class="clientThumb center">
						<img src="images/team-02.jpg" alt="">
					</div>
				</div>
		</div>
			<div class="row">
			</div>
	</div>

</section>
<!-- testimonial end -->

// css
/* client Testimonial css */
#testimonial{}
.testimonialDtl {margin: auto;max-width: 100%;}
.testimonialDtl .fa-quote-left {margin-bottom: 20px;font-size: 30px;}
.starIcon i {color: #ffbc00;margin-bottom: 10px;}
 .clientThumb img{/* border-radius: 50%; */width: 100%;height: 100%; transition: 0.3s}
.clientImg .slick-slide{ padding-top: 10px; margin-top: -5px}
 .clientImg .slick-slide.slick-current img {border:1px solid red;}
/* .clientImg {
    min-height: 141px;
    width: 50%;
    margin: 30px auto 0 auto;
    float: none;
} */
.clientImg.slider-nav.slick-initialized.slick-slider {
    width: 90%;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.58);
    padding: 20px;
    position: relative;
    top: -170px;
}
.clientImg .slick-slide img{ margin: 0 auto }
.clientImg .slick-arrow {position: absolute;top: 14%; font-size: 30px; cursor: pointer;}
.clientImg .fa-angle-left {left: -15px;text-align: left;}
.clientImg .fa.fa-angle-right {right: 0;}

//js

/* testimonial */
  $('.slider-for').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            speed: 500,
            arrows: true,
            fade: true,
            asNavFor: '.slider-nav',
            prevArrow: '<i class="fa fa-angle-left"></i>',
            nextArrow: '<i class="fa fa-angle-right"></i>'

        });
        $('.slider-nav').slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            speed: 500,
            slides:false,
            asNavFor: '.slider-for',
            dots: false,
            centerMode: true,
            focusOnSelect: true,
            autoplay: true,
            centerMode: true,
            centerPadding: '0px',
             margin: '20px',
            mobileFirst: true,
            prevArrow: '<i class="fa fa-angle-left"></i>',
            nextArrow: '<i class="fa fa-angle-right"></i>'
        });