Oct

09

2011

Text Slider for Testimonials with Navigation – JavaScript Widget using jQuery Cycle Plugin

Front End Development  Posted by on October 9th, 2011 / 44 comments
Tags: |

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. jQuery-Cycle plugin can be used to create a simple text slider to show testimonials on web page. There are many options that you can use to control how and when your slide transitions occur. You can also add the navigation links to go through your testimonials.

Here’s the demo of Testimonials Slider using jQuery library and Cycle Plugin:

You can view jQuery Cycle Testimonial Slider Demo in a new window here.

Let’s start adding the code on your web page in three easy steps.

First of all, add jQuery library and Cycle plugin that’s required for this slider. Add folowing code in the head section of yuor web page.

 
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#testimonials')
	.before('<div id="nav">')
	.cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, scrollRight, shuffle
		pager:  '#nav'
     });
});
</script>

As a second step, add these styles to your .css file or just add in the web page using style tag:

 
#testimonials {
width:330px;
background:#E7E9E6 url(images/bg-testimonials.png) left top repeat-x;
border:1px solid #D8D9D6;
margin:10px 0;
 
}
#testimonials blockquote{
padding:10px;
width:300px !important;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
color:#808080;
display:block;
}
 
#testimonials blockquote p{
margin: 0 !important;padding: 5px!important;
 
}
#testimonials blockquote cite {
font-style: normal;
display: block;
 
text-transform: uppercase;
font-weight: bold;
font-style:italic;
color: #555;
padding-left:5px;
margin-top:10px;
}

In the last step, add this html code to your webpage where you want to show the testimonials:

 
<h1>Testimonials</h1>
<div id="testimonials">
 
 <blockquote><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
                <cite>&ndash;Martin - NY</cite></p></blockquote>
 
                <blockquote><p>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                <cite>&ndash;Sandra - LA</cite></p></blockquote>
 
                <blockquote><p>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                <cite>&ndash;Jason - MA</cite></p></blockquote>
 
</div><!--end testimonials-->

You may need to change the width of the testimonials box as per your requirements. You can also define the styles for the navigation links using the #nav in your css file.

Hope that helps.

Cheers!

Related posts:

  1. jQuery Testimonials Slider with Navigation and Effects using Cycle Plugin – Multiple Sliders on Same Page
  2. Nivo Slider as Image Slider Add-on for osCommerce Store
  3. Resolve Jquery Mobile Framework Zoomed Out Text and Font Size Problem on iPhone
  4. Adding rel Attribute to All Links for jQuery Mobile App Page Using jQuery
  5. PIM osCommerce Slider