CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sriyani Rathnayaka
Sriyani Rathnayaka

Reputation: 107

sliding divs horizontally with jquery and javascript

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

Upvotes: 5

Views: 5197

Answers (4)

Idrizi.A
Idrizi.A

Reputation: 12010

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.

Upvotes: 2

Rakesh Vadnal
Rakesh Vadnal

Reputation: 985

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

Upvotes: 2

Praveen Puglia
Praveen Puglia

Reputation: 5631

if you surely want to use jquery, use something that is already built and out there in the community.that will be far secure and flexible option than anything u create from scratch.. Use something like coin slider or jquery cycle plugin. They have some specifics about the html markup on which u apply the plugin. Follow that and you are done.

Upvotes: 1

Anton
Anton

Reputation: 32581

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

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

Upvotes: 1

Related Questions