- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- [Jquery] Vertical Slider Gratuito
-
[Jquery] Vertical Slider Gratuito
Salve a tutti,
sto cercando uno slider come developers . slidedeck . com ma ovviamente gratuito.
Sapete indicarmi qualche fonte?Grazie.
-
è semplice, tutti i div devono avere un id, una classe per l'animazione e uno script, poniamo 5 div:
<div class="transition_div" id="D0" onclick="OpenDiv(this.id)" style="width:500px">contenuto, primo div aperto</div>
<div class="transition_div" id="D1" onclick="OpenDiv(this.id)" style="width:30px">contenuto, secondo div chiuso</div>
<div class="transition_div" id="D2" onclick="OpenDiv(this.id)" style="width:30px">contenuto, terzo div chiuso</div>
<div class="transition_div" id="D3" onclick="OpenDiv(this.id)" style="width:30px">contenuto, quarto div chiuso</div>
<div class="transition_div" id="D4" onclick="OpenDiv(this.id)" style="width:30px">contenuto, quinto div chiuso</div>Uno style css per settare le proprietà dei div e l'animazione:
<style>
.transition_div{
float:left;
overflow:hidden; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }</style>poi ci vuole uno script che ad ogni click li chiuda tutti ed apra solo il div cliccato
<script>
function OpenDiv(who){
for(x=0;x<5;x++){
document.getElementById("D"+x).style.width='30px';
}
document.getElementById(who).style.width='500px';
}
</script>
-
Uhm, grazie per l'ottimo suggerimento! Ma non avresti un file pronto?
-
se attivi teamviewer posso fare io copia e incolla per te
-
No grazie!
-
Googlando un pò ho trovato uno slideshow come lo intendi te ed è gratuito..ti lascio il link anche se un minimo di lavoro lo richiede :
devsmash . com/projects/kwicks
Scaricando il pacchetto hai sia la versione verticale sia orizzontale
-
Molto carino e tutto sommato semplice da usare! Grazie!