JSFiddle - React, Tailwind, and code Playground

by Shajeer Ahamed

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>

JavaScript

$(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), 1000);
            counter++;
            debugger;
            if (counter == lengthOfItem) {
                counter = 0;
                debugger;
                startIteration();
            }

        });

    }

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

});