VIDEO TUTORIAL
Today we are going to make jQuery Tip 14 Testimonial Slideshow!
This is a useful tip that I recently used on a website that wanted to show there visitors right when they hit there page a bunch of testimonials. So the solution was to add a testimonial slideshow that cycles through the list items and then starts over.
Here is the website it was used on http://bahawc.com/.
Pretty cool so lets get started…
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="testimonials"> <ul> <li>“The staff at BAHAWC was awesome and made me feel very comfortable.” – LK</li> <li>“Thanks to BAHAWC I feel better then I remember ever feeling.” – EW </li> <li>“The wins I experienced during my stay at Bay Area Health & Wellness were life changing.” – BF</li> <li>“The sauna therapy improved my overall way of life to a point that I never thought was achievable.” – NM </li> <li>“I never thought I could feel as clear headed as I did before my addiction.” –MB </li> <li>“After experiencing my daughters multiple failed attempts at sobriety we found BAHAWC. I can honestly say I have never been more grateful to a group of people. I have my sober daughter back and could not be any happier.” – JW </li> <li>“The results from the sauna therapy were absolutely amazing.” – CD </li> <li>“The staff really helped me put a plan together to continue my sobriety. It was comforting because it was my plan implemented with their guidance.” - GT </li> <li>“My sleep has never been better.” –SS </li> <li>“I hadn’t realized how depleted my body was of nutrients until I started living healthy again. Thank you BAHAWC.” -PF </li> </ul> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 |
#testimonials li { display: none; list-style: none; font-style: italic; font-weight: bold; font-size: 18px; } |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
(function(){ var counter = 1, quote = $('#testimonials').find('li'), totalLength = quote.length; quote.first().show(); function quoteSlider(){ if( counter === totalLength ){ counter = 0; quote.eq(0).show().siblings('li').hide(); } else { quote.eq(counter).show().siblings('li').hide(); } counter++; //console.log(counter); } window.onload = function(){ setInterval(quoteSlider, 1000); }; })(); |
So this is is a cool tip that comes in handy when displaying testimonials.
And as always…
jQuery Tip 3 Style Sheet Switcher
Simple jQuery Slider
jQuery Tip 7 Fixed Header Scroll Event