Create Your Own Testimonial JQuery Code

In this blog, we will discuss how we can create a simple hide and show code to show Testimonial with fade in fade out effect.

Let's create a simple slider, or you can say testimonial jQuery plugin, in which we will show one by one, the feedback we got from our users. We will write a small and short jQuery code for this. Take a HTML form and take a list, in which we add the feedback for now as static. For example, take a look at the code, given below:

HTML

1. <style>
       .active
       {
           background-color: burlywood;
       }
   
       li {
           list-style: none;
           width: 100%;
           text-align: center;
           font-size: 28px;
           font-family: 'Script MT';
       }
   </style>

1. <div id="testimonials" style="background-color:aqua; height:200px;margin:auto; width:40%;">
       <ul>
           <li class="active">This is first testimonials</li>
           <li style="display: none;">This is second testimonials</li>
           <li style="display: none;">This is third testimonials</li>
           <li style="display: none;">This is fourth testimonials</li>
           <li style="display: none;">This is fifth testimonials</li>
       </ul>
   </div>

You can see in the code given above, we write the data in the list. For now, we are putting the data in the list as static. You can make it dynamic. Thus, you can see that first, li has a class active and the other list has the style property which  displays none, which means first list is only visible the first time. Now, let's go to the JavaScript section, given below:

JavaScript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
    $(document).ready(function()
    {
        setInterval(function()
        {
            if ($("li").last().hasClass("active") == true)
            {
                $("li").last().removeClass("active").fadeOut(2000);
                $("li").first().addClass("active").fadeIn(2000);
            } else {
                $("#testimonials").find(".active").fadeOut(2000);
                $("#testimonials").find(".active").removeClass("active").next().fadeIn(2000).addClass("active");
            }
        }, 3000);
    })
</script>

In the code, given above, on the document ready function, we are using the SetInterval function and setting the 3 seconds in it, which means it will run after every 3 seconds and within it, we have a code by finding the active class, through which we are fading it out and removing this class from the list, adding active class to the next li tag. The same process will work after every 3 seconds and our work is done. Now, run HTML page on the Browser and you will see the output, as shown below:


Our jQuery slider for testimonial is ready to rock. Thank you. "Happy Coding!".