How to Create a Testimonials Slider with jQuery

How to Create a Testimonials Slider with jQuery

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.

Live preview Download it

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.

                <div class="testimonials-slider">
                
                      <div class="slide">
							<div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="images/team1.jpg"></div>
								<div class="testimonials-carousel-context">
                                <div class="testimonials-name">Bill Robinson <span>google.com</span></div>
                                <div class="testimonials-carousel-content"><p>Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo.</p></div>
                            </div>
                      </div>
                      
                      <div class="slide">
							<div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="images/team2.jpg"></div>
								<div class="testimonials-carousel-context">
                                <div class="testimonials-name">Michael Rocks <span>yahoo.com</span></div>
                                <div class="testimonials-carousel-content"><p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo.</p></div>
                            </div>
                      </div>
                      
                      <div class="slide">
							<div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="images/team3.jpg"></div>
								<div class="testimonials-carousel-context">
                                <div class="testimonials-name">Andrew Bilson <span>dailydesignnotes.com</span></div>
                                <div class="testimonials-carousel-content"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal..</p></div>
                            </div>
                      </div>
                      
                </div>

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.

.bx-wrapper .testimonials-thumbnail{ margin: 0px 0px 15px; }
.bx-wrapper .testimonials-title{ text-align: center;  margin: 25px 15px 3px; font-size: 24px; line-height: 1; }
.bx-wrapper .testimonials-carousel-thumbnail{ max-width: 35%; float: left; margin-right: 20px; }
.bx-wrapper .testimonials-carousel-thumbnail img{ display: block;   margin-right: 20px;width: 100px;}
.bx-wrapper .testimonials-carousel-context{ overflow: hidden; }
.bx-wrapper .testimonials-name{ font-size: 18px; margin-bottom: 15px; color:#000000; font-weight:400;}
.bx-wrapper span{ font-size: 11px; margin-left:10px; color:#aaa; font-family: Georgia, Arial, Helvetica, sans-serif; font-style:italic; }
.bx-wrapper {position: relative;margin: 30px auto;padding: 0;width:100%;*zoom: 1;}
.bx-wrapper .slide {padding:0;margin:0;display: block;}
.bx-wrapper .bx-viewport {padding:10px;margin-left:0;z-index:1;width:100%;}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {position: absolute;display:none;bottom: -30px;width: 100%;}
.bx-wrapper .bx-loading {min-height: 50px;background: url(images/bx_loader.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}
.bx-wrapper .bx-pager {text-align: center;font-size: .85em;font-weight: bold;color: #666;padding-top: 20px;}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline;}
.bx-wrapper .bx-pager.bx-default-pager a {background: #666;text-indent: -9999px;display: block;width: 10px;height: 10px;margin: 0 5px;outline: 0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {background: #000;}
.bx-wrapper .bx-next {position: absolute;top: 0;right: 0;width: 30px;border-left:1px solid #ddd;height: 30px;cursor: pointer;background: #ED3131 url(images/caousel-next.png) no-repeat 0 0 ;}
.bx-wrapper .bx-prev {position: absolute;top: 0px;right: 30px;border-right:1px solid #ddd;width: 30px;height: 30px;cursor: pointer;background: #ED3131 url(images/caousel-prev.png) no-repeat 0 0 ;}
.bx-wrapper .bx-controls-direction a {position: absolute;top: 0;margin-top: 0;margin-right: 0px;outline: 0;width: 30px;height: 30px;text-indent: -9999px;z-index: 9999;}

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.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>

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;

     $('.testimonials-slider').bxSlider({
			slideWidth: 800,
			minSlides: 1,
			maxSlides: 1,
			slideMargin: 32,
			auto: true,
			autoControls: true
		  });

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.

Written by Filiz

Hey all, this is Filiz from Istanbul. i am 23 years old. I’m providing web design and development contents for Web Design Tunes!

7 Comments

  1. Pingback: Listly List - jQuery

  2. Jeson Tailor

    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.

  3. kashif khan

    Hi,

    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.
    :)

  4. Juanito

    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..

    Cheers..

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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ThemeForest - Responsive Themes for Web and Mobile Devices