How to Create a Testimonials Slider with jQuery

Posted: 05/12/2013 - 6 Comments

In todays educational article, i will write about testimonials feature that we often see in portfolio and business websites. We also will speak of how to do it in slider shape. Testimonials is an important feature that allows your visitors to read comments written by your customers and have detailed information about you. It is simple and effective.

Designers actually prefer to show that in a single page, and sometimes inside a slider. Slider is giving a visually better and more practical solution. We will learn how to add testimonials slider into our website using BXSlider feature. We will do this in few simple steps. First thing to do is, download necessary jQuery file from plugin page. we shared a sample project below as a demo link. If you want to download whole tutorial, it is also uploaded as a .zip file. You can use this codes 100% free in your personal or commercial projects. If you want to advertise this in your blogs, please give link to this article. Please support us by sharing this article in your social media profiles for us to continue our free tutorials. Now let’s see how to use this plugin.


You’ll learn;

  • How to make jQuery testimonials slider
  • How to integrate BXSlider

Step #1 – Create Slider

The first step to build your testimonials slider. I’ve added images to download .zip folder, please don’t forget to change all images.

Step #2 – Make your style

The second step is to create style’s for the testimonials slider items. Add following codes to the your style.css file. If you’ll add CSS codes in your style.css, your testimonials slider will look our demo.

Step #3 – Add jQuery’s

At third step we integrate jQuery codes into your design. Below is an example how to add it. If there is standart jQuery code in your design, only integrate jquery.bxslider.min.js link.

Step #4 – Call the plugin

Add jQuery plugin code to your footer are (above /body tag). If you have made, now your testimonials slider look’s our demo. If you do not want auto slider, remove “auto: true,” line in these codes;

If you done steps properly, testimonials slider will appear same as demo page. All codes are available at download link. You can download and use free from there. We hope this educative article will be useful for you. Thanks a lot or spare time to read it. Please help us by sharing this article in your social media profiles and also bookmark us.

We recommend that you read

Leave your comment

Comments (6)

Leave a Reply

Your email address will not be published. Required fields are marked *

    Joe - Posted: 07/23/13 - 4:04 pm Reply

    Thanks for your help, this was a great find! Tried to code my own but needed something smaller and more simple.

    Jeson Tailor - Posted: 08/06/13 - 7:52 pm Reply

    I appreciate for the post you have share. I found the very useful tip here and you have explained it in very simple way. I would look forwards to read more posts from you.

    kashif khan - Posted: 08/19/13 - 11:56 am Reply


    Thanks for this lovely slider. Was searching for it and finally got it here. Only one thing i want to add to this slider is that i want it put numbers to the slides in between the next and previous buttons. Could you please help me how can i get that.

    Thanks once again.

    Manuela - Posted: 08/19/13 - 12:48 pm Reply

    Finally, something simple to use and clear to understand.
    Thank you very much!

    Juanito - Posted: 08/22/13 - 2:40 am Reply

    Thanks for a good post..This is what im looking for…Just one question though, the slides are showing all of it…Not,one by one…Im working on a local server..So,I can’t add the link..


    Any idea on how to fix it as its showing all of the slides not one at a time…

    Arshaan - Posted: 08/31/13 - 9:58 pm Reply

    Thanks for the great tutorial. Just what I wanted 🙂