"Testimonial with slider"
Bootstrap 3.3.0 Snippet by koshikojha

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/relea/cssses/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <section class="testimonials-sec"><script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="testmonial-block"> <div id="testimonials-slider-pager" class="hidden-xs"> <a href="#" class="pager-item active" data-slide-index="0"><img src="http://www.kiathemes.in/tf/digita/images/testmonial/1.jpg" alt="" /></a> <a href="#" class="pager-item" data-slide-index="1"><img src="http://www.kiathemes.in/tf/digita/images/testmonial/1.jpg" alt="" /></a> <a href="#" class="pager-item" data-slide-index="2"><img src="http://www.kiathemes.in/tf/digita/images/testmonial/2.jpg" alt="" /></a> <a href="#" class="pager-item" data-slide-index="3"><img src="http://www.kiathemes.in/tf/digita/images/testmonial/3.jpg" alt="" /></a> <a href="#" class="pager-item" data-slide-index="4"><img src="http://www.kiathemes.in/tf/digita/images/testmonial/4.jpg" alt="" /></a> </div> <div class="testimonials-slider"> <h2>Happy Client What Say<br> About Us</h2> <ul class="slider"> <!--Start Slide Item--> <li class="slide-item"> <div class="single-testimonials"> <div class="author-image"> <img src="http://www.kiathemes.in/tf/digita/images/testmonial/6.jpg" alt="" /> </div> <div class="author-content"> <h5>Tahashia Khan</h5> <h6>Web Designer</h6> <p>Hi ipsum dolor sit amet, est vel, id fllentesque tortor pede risus nullam hiden over the teamwe happy for your service</p> </div> </div> </li> <!--End Slide Item--> <!--Start Slide Item--> <li class="slide-item"> <div class="single-testimonials"> <div class="author-image"> <img src="http://www.kiathemes.in/tf/digita/images/testmonial/6.jpg" alt="" /> </div> <div class="author-content"> <h5>Gudrun Kunde</h5> <h6>branch meneger</h6> <p>Hi ipsum dolor sit amet, est vel, id fllentesque tortor pede risus nullam hiden over the teamwe happy for your service</p> </div> </div> </li> <!--End Slide Item--> <!--Start Slide Item--> <li class="slide-item"> <div class="single-testimonials"> <div class="author-image"> <img src="http://www.kiathemes.in/tf/digita/images/testmonial/8.jpg" alt="" /> </div> <div class="author-content"> <h5>Taylor Johns</h5> <h6>seo advisor</h6> <p>Hi ipsum dolor sit amet, est vel, id fllentesque tortor pede risus nullam hiden over the teamwe happy for your service</p> </div> </div> </li> <!--End Slide Item--> <!--Start Slide Item--> <li class="slide-item"> <div class="single-testimonials"> <div class="author-image"> <img src="http://www.kiathemes.in/tf/digita/images/testmonial/7.jpg" alt="" /> </div> <div class="author-content"> <h5>Destiny Rice</h5> <h6>marketing expert</h6> <p>Hi ipsum dolor sit amet, est vel, id fllentesque tortor pede risus nullam hiden over the teamwe happy for your service</p> </div> </div> </li> <!--End Slide Item--> <!--Start Slide Item--> <li class="slide-item"> <div class="single-testimonials"> <div class="author-image"> <img src="http://www.kiathemes.in/tf/digita/images/testmonial/5.jpg" alt="" /> </div> <div class="author-content"> <h5>Maritza Beatty</h5> <h6>seo expert</h6> <p>Hi ipsum dolor sit amet, est vel, id fllentesque tortor pede risus nullam hiden over the teamwe happy for your service</p> </div> </div> </li> <!--Start Slide Item--> </ul> </div> </div> </div> </div> </div> </section>
.flaticon-left-arrow:before{content: "\f0da";} .flaticon-right-arrow:before{content: "\f0da";} .testimonials-sec { position: relative; width: 100%; padding: 140px 0 140px; background-color: #f8f8f8; } .testimonials-sec .bx-wrapper { -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } .testmonial-block{ float: left; width: 100%; position: relative; background: rgba(0, 0, 0, 0) url("http://www.kiathemes.in/tf/digita/images/resources/testmonial-bg.png") no-repeat scroll left; padding-left: 59px; } .single-testimonials .author-image, .single-testimonials .author-content { display: table-cell; vertical-align: middle; } .single-testimonials .author-content{ width: 455px; } .single-testimonials .author-image { margin-top: 30px; width: 104px; float: left; } .single-testimonials .author-image img { border-radius: 50%; height: 80px; margin-left: auto; margin-right: auto; max-width: none; position: relative; top: 0; width: 80px; } .single-testimonials .author-content img { margin-bottom: 20px; max-width: 100%; width: 60px; } .testimonials-slider h2 { float: right; position: relative; right: 51px; color: #00000a; margin-bottom: 20px; margin-top: -13px; text-transform: uppercase; } .single-testimonials .author-content h5 { font-size: 18px; margin: 20px 0 0; } .single-testimonials .author-content h6 { color: #159eee; font-size: 14px; margin-bottom: 15px; } .testimonials-slider .bx-wrapper { background-color: transparent; border: medium none; -webkit-box-shadow: none; box-shadow: none; margin-bottom: 0; } .testimonials-slider .bx-wrapper ul.slider { margin: 0; padding: 0; } .testimonials-slider .bx-wrapper .bx-controls-direction { text-align: center; margin-left: 283px; } .testimonials-slider .bx-wrapper .bx-controls-direction a { background-image: none; font-size: 27px; position: relative; text-indent: 0; top: 10px; font-weight: 400; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .testimonials-slider .bx-wrapper .bx-controls-direction a:hover { color: #4694f9; } .testimonials-slider .bx-wrapper .bx-prev { left: 0; margin-right: 25px; } .testimonials-slider .bx-wrapper .bx-next { right: 0; } .single-testimonials { float: left; width: 100%; margin-left: 543px; } #testimonials-slider-pager a.pager-item { border-radius: 50%; left: 0; overflow: hidden; position: absolute; top: 0; width: 35px; z-index: 99; height: 35px; border: 5px solid rgba(21,158,238,.3); } #testimonials-slider-pager a.pager-item.active{ border: 5px solid rgba(21,158,238,.6); } #testimonials-slider-pager a.pager-item img { width: 100%; /*top: -6px;*/ position: relative; } #testimonials-slider-pager a.pager-item:nth-child(1) { left: 30%; top: 60%; } #testimonials-slider-pager a.pager-item:nth-child(2) { left: 38%; top: 20%; } #testimonials-slider-pager a.pager-item:nth-child(3) { left: 25%; top: 63%; } #testimonials-slider-pager a.pager-item:nth-child(4) { left: 6%; top: 26%; } #testimonials-slider-pager a.pager-item:nth-child(5) { left: 17%; top: 6%; } #testimonials-slider-pager a.pager-item:nth-child(6) { left: 40%; top: 18%; } #testimonials-slider-pager a.pager-item:nth-child(1) { display: none; } .ptt{padding: 70px 0 140px;}
/*************************************************************************************************************** |||||||||||||||||||||||||||| CUSTOM SCRIPT FOR ASSURANCE ||||||||||||||||||||||||||||||||||||| **************************************************************************************************************** |||||||||||||||||||||||||||| TABLE OF CONTENT |||||||||||||||||||||||||||||||||||| **************************************************************************************************************** **************************************************************************************************************** 01. Preloader 02. Sticky header 03. mainmenu 04. Revolution slider 05. scoll to Top 06. Testimonial Slider 07. Sponser Slider 08. Accordion 09. Fact counter 10. Prealoder 11. Select Dropdown 12. ContactFormValidation **************************************************************************************************************** |||||||||||||||||||||||||||| End TABLE OF CONTENT |||||||||||||||||||||||||||||||||||| ****************************************************************************************************************/ (function($) { "use strict"; /*---------------------------- Preloader ------------------------------ */ function prealoader () { if($('.loader-container').length) { $('.loader-container').fadeOut(1000); } } /*=================== Sticky Header ===================*/ function stickyHeader () { var scroll = $(window).scrollTop(); if (scroll > 200) { $(".mainmenu-area.stick, .header-lower.stick, .header-area.stick").addClass("sticky animated fadeInDown"); var nav_height = $(".mainmenu-area.stick, .header-lower.stick, .header-area.stick").innerHeight(); $(".menu-height").css({ "height": nav_height }); } else if (scroll < 200) { $(".mainmenu-area.stick, .header-lower.stick, .header-area.stick").removeClass("sticky animated fadeInDown"); $(".menu-height").css({ "height": 0 }); } } //====Main menu=== function mainmenu() { //Submenu Dropdown Toggle if($('.main-menu li.dropdown ul').length){ $('.main-menu li.dropdown').append('<div class="dropdown-btn"></div>'); //Dropdown Button $('.main-menu li.dropdown .dropdown-btn').on("click", function() { $(this).prev('ul').slideToggle(500); }); } } //===RevolutionSliderActiver=== function revolutionSliderActiver () { if ($('.rev_slider_wrapper #slider1').length) { $("#slider1").revolution({ sliderType:"standard", sliderLayout:"auto", delay:5000, navigationType:"bullet", navigationArrows:"0", navigationStyle:"preview3", dottedOverlay:'yes', hideTimerBar:"off", onHoverStop:"off", navigation: { arrows:{enable:true} }, responsiveLevels:[1920,1280,975,600,300], gridwidth: [1170, 720, 500, 500, 300], gridheight: [650, 600, 550, 450, 400] }); }; } //===scoll to Top=== function scrollToTop() { if ($('.scroll-to-target').length) { $(".scroll-to-target").on("click", function() { var target = $(this).attr('data-target'); // animate $('html, body').animate({ scrollTop: $(target).offset().top }, 1000); }); } } //===Testmonial Slider Style 1=== function testmonialcarousel () { $('.testmonial-carousel').owlCarousel({ loop:true, margin:30, nav:true, dots: false, autoplayHoverPause:true, autoplay: 6000, smartSpeed: 700, navigation : true, navigationText : ['<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-left fa-stack-1x fa-inverse"></i></span>','<span class="fa-stack"><i class="fa fa-circle fa-stack-1x"></i><i class="fa fa-chevron-circle-right fa-stack-1x fa-inverse"></i></span>'], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 800:{ items:1 }, 1024:{ items:1 }, 1100:{ items:1 }, 1200:{ items:1 } } }) } //===Sponser Slider Style 2=== function sponsercarousel () { $('.sponser-carousel').owlCarousel({ loop:true, margin:10, responsiveClass:true, autoplay:true, autoplayTimeout:2000, responsive:{ 0:{ items:1, nav:true }, 600:{ items:3, nav:true }, 1000:{ items:5, nav:true, loop:false } } }) } /*----------------------------------- TESTMONIAL SLIDER ACTIVE -----------------------------------*/ function clientBxSlider () { var clientBxSlider = $('.clinet-carousal .item'); if (clientBxSlider.length > 0) { clientBxSlider.bxSlider({ // adaptiveHeight: true, auto: false, controls: true, nextText: '<i class="flaticon-right-arrow"></i>', prevText: '<i class="flaticon-left-arrow"></i>', mode: 'fade', pause: 3000, speed: 500, pager: false }); } } /*----------------------------------- TESTMONIAL SLIDER ACTIVE -----------------------------------*/ function testmonialBxSlider () { var testmonialBxSlider = $('.testimonials-slider .slider'); if (testmonialBxSlider.length > 0) { testmonialBxSlider.bxSlider({ // adaptiveHeight: true, auto: false, controls: true, nextText: '<i class="flaticon-right-arrow"></i>', prevText: '<i class="flaticon-left-arrow"></i>', mode: 'fade', pause: 3000, speed: 500, pager: true, pagerCustom: '#testimonials-slider-pager' }); } } //===Search box === function searchbox() { //Search Box Toggle if($('.search-toggle').length){ //Dropdown Button $('.search-toggle').on("click", function() { $(this).toggleClass('active'); $(this).next('.search-box').toggleClass('now-visible'); }); } } $('.toggle').on("click", function(e) { e.preventDefault(); var $this = $(this); if ($this.next().hasClass('show')) { $this.next().removeClass('show'); $this.next().slideUp(350); } else { $this.parent().parent().find('li .inner').removeClass('show'); $this.parent().parent().find('li .inner').slideUp(350); $this.next().toggleClass('show'); $this.next().slideToggle(350); } }); /*=================== Accordion ===================*/ function accordion () { $(".toggle").each(function(){ $(this).find('.content').hide(); $(this).find('h5:first').addClass('active').next().slideDown(500).parent().addClass("activate"); $('h5', this).on("click", function() { if ($(this).next().is(':hidden')) { $(this).parent().parent().find("h5").removeClass('active').next().slideUp(500).removeClass('animated fadeInUp').parent().removeClass("activate"); $(this).toggleClass('active').next().slideDown(500).addClass('animated fadeInUp').parent().toggleClass("activate"); } }); }); } //=== Fact counter === function CounterNumberChanger () { var timer = $('.timer'); if(timer.length) { timer.appear(function () { timer.countTo(); }) } } //=== Select menu === function selectDropdown () { if($(".selectmenu").length) { $( ".selectmenu" ).selectmenu(); }; } //=== Thm scroll anim=== function thmScrollAnim() { if ($('.wow').length) { var wow = new WOW({ mobile: false }); wow.init(); }; } //=== offsetgap=== function offsetgap() { var offset_gap = $(".container").offset().left; $(".right-text-area, .right-content-are").css({ right: offset_gap }); $(".left-content-are, .left-content-are, .more-project .sec-title").css({ left: offset_gap }); } // ===Project=== function projectMasonaryLayout() { if ($('.post-filter').length) { $('.post-filter li').children('span').on("click", function() { var Self = $(this); var selector = Self.parent().attr('data-filter'); $('.post-filter li').children('span').parent().removeClass('active'); Self.parent().addClass('active'); $('.filter-layout').isotope({ filter: selector, animationOptions: { duration: 500, easing: 'linear', queue: false } }); return false; }); } if ($('.post-filter.has-dynamic-filter-counter').length) { // var allItem = $('.single-filter-item').length; var activeFilterItem = $('.post-filter.has-dynamic-filter-counter').find('li'); activeFilterItem.each(function() { var filterElement = $(this).data('filter'); console.log(filterElement); var count = $('.gallery-content').find(filterElement).length; $(this).children('span').append('<span class="count"><b>' + count + '</b></span>'); }); }; } //=== Contact Form Validation === function ContactFormValidation() { if(('.form-sec').length) { var form = $('#ajax-contact'); var formMessages = $('.form-messages'); $(form).submit(function(e) { e.preventDefault(); var formData = $(form).serialize(); $.ajax({ type: 'POST', url: $(form).attr('action'), data: formData }).done(function(response) { $(formMessages).removeClass('error'); $(formMessages).addClass('success'); $(formMessages).text(response); $(this).find("input").val(""); $(form).trigger("reset"); }).fail(function(data) { $(formMessages).removeClass('success'); $(formMessages).addClass('error'); if (data.responseText !== '') { $(formMessages).text(data.responseText); } else { $(formMessages).text('Oops! An error occured and your message could not be sent.'); } }); }); } } //**** Account Login Popup ****// function accountlogin() { $('.account-login').on('click', function(){ $('.popup-sec').addClass('active'); $('.login-account').addClass('active'); $('html').addClass('stop-scroll'); }); $('.close-account').on('click', function(){ $('.popup-sec').removeClass('active'); $('.login-account').removeClass('active'); $('html').removeClass('stop-scroll'); }); } //**** Account Login Popup ****// function accountregister() { $('.account-register').on('click', function(){ $('.popup-sec').addClass('active'); $('.register-account').addClass('active'); $('html').addClass('stop-scroll'); }); $('.close-account').on('click', function(){ $('.popup-sec').removeClass('active'); $('.register-account').removeClass('active'); $('html').removeClass('stop-scroll'); }); } /* ========================================================================== When document is loading, do ========================================================================== */ $(window).on('load', function() { prealoader (); revolutionSliderActiver (); mainmenu (); testmonialcarousel (); clientBxSlider (); sponsercarousel (); scrollToTop (); CounterNumberChanger (); accordion (); ContactFormValidation (); selectDropdown (); thmScrollAnim (); searchbox (); offsetgap (); projectMasonaryLayout (); testmonialBxSlider (); accountlogin (); accountregister (); }); /* ========================================================================== When document is Scrolling, do ========================================================================== */ $(window).on('scroll', function() { stickyHeader(); }); })(window.jQuery);

Related: See More


Questions / Comments: