sliding divs horizontally with jquery and javascript

Question

I am trying to display my testimonials in my about us page. There I use 3 divs with styling horizontally to display 3 testimonials at once.

Here what im trying to do is I want to add some sliding effect with query to disappear 1st 3 divs and then need to load 2nd 3 divs with different testimonials. and so on.. I did HTML and CSS.. but no idea how to do it with query... can any body help me to do this..???

<div class="testimonials">
    <div class="cols">
        contents...1st time                    
    </div>
    <div class="cols">
        contents...1st time       
    </div>
    <div class="cols">
        contents...1st time       
    </div>

    <div class="cols">
        contents...2st time                    
    </div>
    <div class="cols">
        contents...2st time       
    </div>
    <div class="cols">
        contents...2st time       
    </div>

</div>


.testimonials {
    width: 640px; 
    height: 300px;
    //background: red; 
}

.cols {
    width: 150px;
    height: 200px;
    margin: 0 20px 0 0;
    background: gray;
    float: left;
}

any comments, any idea greatly appreciated...

thank you..

Answer 1

Try this, lightweight javascript jQuery library: http://baijs.nl/tinycarousel/

Answer 2

Here is a great plugin for jQuery carousel

http://sorgalla.com/projects/jcarousel/

Github: https://github.com/jsor/jcarousel

or

Github: https://github.com/SSilence/simple.carousel

See the jsFiddle demo here: http://jsfiddle.net/enve/GWhaz/

The first three <li> are showing first and three others are showing after 2000 sec.

Answer 3

Something like this? http://jsfiddle.net/gZkUV/1/

$('#id').show('slide', {direction: 'right'}, 1000);