Salve a tutti sto cercando di creare uno slider verticale,
voi direte ma ce ne sono tanti in giro perchè non usi uno già bello e pronto??
Bhe sfortunatamente non ho trovato nessuno slider che soddisfacesse le mie esigenze.
Comunque, ciancio alle bande, vi spiego il mio problema,
ho due bottoni next/prev che mi servono a far scorrere le slide contenute all'interno di un div,
devo fare in modo che l'ultima slide presente all'interno del div deve essere l'utlima visualizzabile cioè se clicco ancora su next non deve più eseguire la funzione vai avanti con le slide.
Vi posto il mio codice magari ci capite di più
codice html:
codice slider.js:codice:<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/slider.js"></script> <script> $(document).ready(function(){ VerticalSlide(); }); </script> </head> <body> <input type="button" value="prev" id="prev"/> <div id="contenitore" style="width:160px;height:500px;background:blue;overflow:hidden"> <div class="prova" style="margin-top:10px;margin-left:auto;margin-right:auto;height:100px;background:red;width:140px;">P</div> <div class="prova" style="margin-top:10px;margin-left:auto;margin-right:auto;height:100px;background:red;width:140px;">P</div> <div class="prova" style="margin-top:10px;margin-left:auto;margin-right:auto;height:100px;background:red;width:140px;">P</div> <div class="prova" style="margin-top:10px;margin-left:auto;margin-right:auto;height:100px;background:red;width:140px;">P</div> <div class="prova" style="margin-top:10px;margin-left:auto;margin-right:auto;height:100px;background:red;width:140px;">P</div> <div class="prova" style="margin-top:10px;margin-left:auto;margin-right:auto;height:100px;background:red;width:140px;">P</div> <div class="prova" style="margin-top:10px;margin-left:auto;margin-right:auto;height:100px;background:red;width:140px;">P</div> </div> <input type="button" value="next" id="next"/> <input type="button" value="fondo" id="fondo"/> </body> </html>
Spero sia chiaro quello che intendo fare.codice:function VerticalSlide(){ var cont=ContaElementi(); var top=$('#contenitore').offset().top; var elementTop=top+10; var elementi=$('#contenitore').children('.prova'); var altezza=$('#contenitore').css("height").replace('px',''); var altezzaRel=altezza-10; var ultimo=$(elementi[elementi.length-1]); var primo=$(elementi[0]); $('#next').click(function(){ //alert($(elementi[elementi.length-1]).css("marginBottom").replace('px', '')); $(elementi[0]).animate({"marginTop":"-=100px"},"slow","easeInQuad"); }); $('#prev').click(function(){ if($(elementi[0]).offset().top==elementTop){ } else{ $(elementi[0]).animate({"marginTop":"+=100px"},"slow","easeOutQuad"); } }); $(ultimo).click(function(){ alert($(this).offset().left+" top"+$(this).offset().top); }); $('#fondo').click(function(){ var m=cont*10; var h=cont*100; var H=m+h; var topLast=$(ultimo).offset().top; if(topLast<altezza-90) { } }); } function ContaElementi(){ return $('#contenitore').children('.prova').length; }
Ringrazio anticipatamente tutti per la disponibilità.
p.s. uso jquery

, vi spiego il mio problema,
Rispondi quotando