2012-12-21 13 views
5

Ich versuche, meine Zeugnisse in meiner über uns Seite anzuzeigen. Dort verwende ich 3 divs mit horizontal gestylt, um 3 Bewertungen gleichzeitig anzuzeigen.gleitende divs horizontal mit jquery und Javascript

Hier, was ich versuche zu tun ist, ich möchte einige Schiebe-Effekt mit Abfrage zu verschwinden, um zu verschwinden 1st 3 divs und müssen dann laden 2. 3 divs mit verschiedenen Zeugnissen. und so weiter .. Ich habe HTML und CSS gemacht .. aber keine Ahnung, wie man es mit der Abfrage macht ... kann mir irgendein Körper dabei helfen .. ???

<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; 
} 

keine Kommentare, eine Idee, sehr zu schätzen ...

danke ..

+0

Sie einen Blick auf diese asnwer haben sollte, zeigt es eine gute Technik [horizontal zwischen den Elementen Schiebe] zu implementieren (http://stackoverflow.com/questions/ 24414642/responsive-horizontale-Seite-sliding-navigation/24465646 # 24465646) –

Antwort

2

starten, leicht Javascript jQuery-Bibliothek: http://baijs.nl/tinycarousel/

+0

wie ich kann es hinzufügen ... das ist mein html und css..http: //jsfiddle.net/XJVYj/67/ –

+0

chk dies, http://jsfiddle.net/rakesh_vadnal/XJVYj/73/ –

+0

kann ich es verwenden ohne rechten und linken Link .. kann ich div gleiten automatisch machen ... und kann ich auch div tag anstelle von ul tag verwenden –

2

Hier ist ein großes Plugin für jQuery Karussell

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

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

oder

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

Siehe jsFiddle Demo hier: http://jsfiddle.net/enve/GWhaz/

Die ersten drei <li> zeigen erste und drei andere nach 2000 sec zeigen.

+0

danke für die Antwort .. Ich möchte aktuelle 3 Testimonials Divs mit den nächsten 3 divs automatisch (nach einiger Zeit) –

+0

Ich habe meine Antwort bearbeitet – Enve

+0

Es ist in Ordnung .. danke für die antwort .. aber kann ich es ohne rechte und linke link .. kann ich div gleiten automatisch machen ... und kann ich auch div tag anstelle von ul tag –

1

So ähnlich? http://jsfiddle.net/gZkUV/1/

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

Ich muss es automati arbeiten lassen cally. das heißt .. 1. 3 Testimonials laden auf die Seite und es sollte irgendwann auf der Seite sein und dann laden nächsten 3 Zeugnisse ... und so weiter ... –

1

, wenn Sie sicher jquery verwenden möchten, verwenden Sie etwas, das bereits gebaut und da draußen in der community.that wird als u von Grund auf neu erstellen etwas weit sichere und flexible Option sein .. Verwenden Sie so etwas wie coin slider oder jquery cycle plugin. Sie haben einige Besonderheiten bezüglich des HTML-Markups, auf dem Sie das Plugin anwenden. Folge dem und du bist fertig.

+0

http://jsfiddle.net/XJVYj/67/ –