2012-12-21 7 views
5

Próbuję wyświetlić moje referencje na mojej stronie o nas. Używam tutaj 3 divs z stylizacją poziomą, aby wyświetlić 3 referencje na raz.przesuwne divy w poziomie z jquery i javascript

Tutaj, co ja próbuję zrobić, to chcę dodać efekt ślizgowy z zapytaniem, aby zniknął 1 3 divs, a następnie trzeba załadować 2nd 3 divs z różnymi referencjami. i tak dalej ... Zrobiłem HTML i CSS .. ale nie mam pojęcia, jak to zrobić z zapytaniem ... czy jakiekolwiek ciało mi w tym pomoże ... ???

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

żadnych komentarzy, każdy pomysł mile widziana ...

dziękuję ..

+0

Należy przyjrzeć się tym asnwer, pokazuje dobrą techniką w celu realizacji [poziome przesuwanie się pomiędzy elementami] (http://stackoverflow.com/questions/ 24414642/responsive-horizontal-page-sliding-navigation/24465646 # 24465646) –

Odpowiedz

2

Spróbuj lekkie javascript jQuery Biblioteka: http://baijs.nl/tinycarousel/

+0

jak ja można go dodać ... to jest mój html i css..http: //jsfiddle.net/XJVYj/67/ –

+0

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

+0

czy mogę go użyć bez prawego i lewego łącza .. czy mogę uczynić div przesuwającym się automatycznie ... a także czy mogę użyć znacznika div zamiast tagu ul –

2

Oto wielki plugin do jQuery karuzeli

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

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

lub

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

Zobacz jsFiddle demo tutaj: http://jsfiddle.net/enve/GWhaz/

pierwszych trzech <li> są pokazano pierwszy i trzy inne są pokazano po 2000 sek.

+0

dzięki za odpowiedź .. Chcę zmienić bieżące 3 referencje divs z następnymi 3 divs automatycznie (po pewnym okresie czasu) –

+0

Zmieniłem moją odpowiedź – Enve

+0

Jest ok .. dziękuję za odpowiedź .. Ale czy mogę go używać bez prawego i lewego łącza .. czy mogę uczynić div przesuwającym się automatycznie ... a także czy mogę użyć znacznika div zamiast tagu ul –

1

Coś takiego? http://jsfiddle.net/gZkUV/1/

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

Muszę pozwolić mu działać automatycznie cally. to znaczy .. Pierwsze 3 referencje ładują się na stronę i powinny pojawić się na stronie, a następnie wczytać kolejne 3 referencje ... i tak dalej ... –

1

jeśli na pewno chcesz używać jQuery użyć czegoś, co jest już zbudowany i tam w community.that będzie znacznie bezpieczny i elastyczny opcja niż cokolwiek u stworzenia od podstaw .. Użyj coś jak coin slider lub jquery cycle plugin. Mają pewne szczegóły dotyczące znaczników html, na których stosuje się wtyczkę. Idź za tym i gotowe.

+0

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