How to Create Testimonial Slider

Question

I have to create a slider plugin for testimonial to show in a webpage, the testimonial item should be visible one at a time , I have created basic blocks in HTML and jquery.I used setTimeOut function to hide and show testimonial item inside each function, but it not works properly. I am pasting my code here

** HTML**

<div class="col-md-6 testimonial-wrapper">

                    <div class="testimonial-item" style="display: block; opacity: 0.872447;">
                        <h3>
                            Testimonials</h3>
                        <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;
                            margin-left: 0;">
                        <h4>
                          Shaf/ Seo</h4>
                        <blockquote>
                            <p>Hi                      
                            </p>
                        </blockquote>
                     </div>

                    <div class="testimonial-item" style="display: block; opacity: 1;">
                        <h3>
                            Testimonials</h3>
                        <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;
                            margin-left: 0;">
                        <h4>
                          Shaje/ As</h4>
                        <blockquote>
                            <p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text                       
                            </p>
                        </blockquote>
                     </div>

           </div>

JQUERY

$(document).ready(function () {

    var wrapper = $(".testimonial-wrapper");
    var testimonialItem = $(".testimonial-wrapper .testimonial-item");
    var timeOut = 10000;
    var lengthOfItem = testimonialItem.length;
    var counter = 0;

    startIteration();



    function startIteration() {
        testimonialItem.each(function () {
            var current = $(this);
            setInterval(startTestimonialSlider(current), timeOut);
            counter++;
            debugger;
            if (counter == lengthOfItem) {
                counter = 0;
                debugger;
                startIteration();
            }

        });

    }

    function startTestimonialSlider(itemToDisplay) {
        itemToDisplay.prev().fadeOut();
        itemToDisplay.fadeIn();
    }

});

This is not working properly.

Please look at the fiddled code here

Answer 1

i think this is what you wanted to do right ?

 $(document).ready(function () { var testimonialItem = $(".testimonial-wrapper .testimonial-item"); var lengthOfItem = testimonialItem.length; var counter = 0; testimonialItem.hide(); setTimeout(function(){ startIteration(counter); }, 1000); function startIteration(counter) { testimonialItem.eq(counter).fadeIn('slow', function() { if(counter<=lengthOfItem){ setTimeout(function(){ testimonialItem.fadeOut('slow',function(){ if (counter == lengthOfItem) { counter = 0; }else{ counter++;} setTimeout(function(){ startIteration(counter);}, 500); });}, 2000); } }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6 testimonial-wrapper"> <div class="testimonial-item" style="display: block; opacity: 0.872447;"> <h3>Testimonials</h3> <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;margin-left: 0;"> <h4>Shaf/ Seo</h4> <blockquote> <p>Hi</p> </blockquote> </div> <div class="testimonial-item" style="display: block; opacity: 1;"> <h3> Testimonials</h3> <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px; margin-left: 0;"> <h4> Shaje/ As</h4> <blockquote> <p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text</p> </blockquote> </div> </div>