Jslider 1.0

<!-- [INIZIO] JSLIDER -->
<script type="text/Javascript">
/* ---------------------------*/
// SCRIPT JSLIDER 1.0
// SLASH' - HENRY.
// PIXEL GRAPHIC STUDIO - FFREPORT.Net
/* ---------------------------*/


/* NUMERO PANNELLI AUMENTATE/DIMINUITE IN BASE AL NUMERO DEI PANNELLI */
var last = 5;

/* NON MODIFICARE */
var first = 1;
var current = last;
function nextTab(){object=document.getElementById("slide"+current);object.checked=false;if(current==last){current=1}else{current++}object=document.getElementById("slide"+current);object.checked=true;timeout=setTimeout("nextTab()",3e3)}var slider=document.getElementById("jslider");var timeout;slider.onmouseover=function(){clearTimeout(timeout)};slider.onmouseout=function(){timeout=setTimeout("nextTab()",3e3)}
</script>
<script type="text/Javascript"> nextTab() </script>
<!-- [FINE] JSLIDER -->

/*CREDITI !!!NON RIMUOVERE!!! */
.jcredits a {color: #000; font-size: 9px !important; font-family: arial !important}
.jcredits {width: 800px; text-align:right; font-size: 9px !important; font-family: arial !important}

/*FINE CREDITI*/


/* --- JSLIDER BY SLASH' E .HENRY --- */
#jslider input {display: none}

#slide1:checked ~ #slides .content {margin-left: 0}
#slide2:checked ~ #slides .content {margin-left: -100%}
#slide3:checked ~ #slides .content {margin-left: -200%}
#slide4:checked ~ #slides .content {margin-left: -300%}
#slide5:checked ~ #slides .content {margin-left: -400%}

/* NUMERO PANNELLI X 100= .content {width: ---%} */
#slides .content {width: 500%}
/* .content {width: ---%}: NUMERO PANNELLI= .article {width: ---%} */
#slides .article {width: 20%; float: left}

/* GIOCA SU QUESTI PER ALLINEARE I CONTROLLI */
#active {margin: 8% 0 0; text-align: center}
#controls {margin: -11% 0 0 0; width: 100%; height: 50px}


/* BASE */
#slider {text-align: center}
strong {font-weight: bold}
#overflow {width: 100%; overflow: hidden}
.article img {width: 100%}

#slider label, #slider a {color: teal; cursor: pointer; text-decoration: none}
#slider label:hover, #slider a:hover {color: #000 !important}
#slider * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}
#jslider label, #active, #jslider img {-moz-user-select:none; -webkit-user-select:none}
.catch {display: block; height: 0; overflow: hidden}
#slider {margin: 0 auto}
#description {margin: 25px auto; text-align: left; max-width: 650px; padding: 0 25px}
.respond {margin: 0 auto; max-width: 370px}

/* STILI - CONROLLI */
#controls label {display: none; width: 100px; height: 50px; opacity: 0.3}
#active label {border-radius: 10px; display: inline-block; width: 15px; height: 15px; background: #EBEBEB; border: 2px solid #FFF; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); margin-right: 5px}
#active label:hover {background: #CCC}
#controls label:hover {opacity: 0.8}

/*FRECCIA DX #DA AGGIUNGERE IN BASE AL NUMERO DI PANNELLI CHE ANDRETE A METTERE PER SPOSTARE LA FRECCIA MODIFICATE IL MARGIN*/
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {background: url('http://img1.firenex.net/QcSNehPaDf81oqVZmmV8.png') no-repeat; float: right; margin: 0 -10px 0 0; display: block; height: 65px; width: 43px; background-position:center}

/*FRECCIA SX #DA AGGIUNGERE IN BASE AL NUMERO DI PANNELLI CHE ANDRETE A METTERE PER SPOSTARE LA FRECCIA MODIFICATE IL MARGIN*/
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {background: url('http://img1.firenex.net/CiaNbi8TDR8GQsPZMUiL.png') no-repeat; float: left; margin: 0 0 0 -10px; display: block; height: 65px; width: 43px; background-position:center; text-align:right}

/*PALLINI IL BACKGROUND è IL COLORE DEL PALLINO ATTIVO, AGGIUNGETE UNA RIGA SE AGGIUNGETE I PANNELLI, TOGLIETE UNA RIGA SE DIMINUITE I PANNELLI E RICORDATE DI MODIFICARE IL NUMERO DI #SLIDE E NTH-CHILD*/
#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) {background: #7D7D7D}


/* STILI - SLIDER */
#slides {border-radius: 5px; box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.3); padding: 1%; background: #EBEBEB; width: 800px; align:center}


/* ANIMAZIONE */
#slides .content {-webkit-transform: translatez(0); -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000)}
#controls label {-webkit-transform: translatez(0); -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; width: 5px; height: 5px; margin-right: 5px}
#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info {opacity: 1; -webkit-transition: all 1s ease-out 0.6s; -moz-transition: all 1s ease-out 0.6s; -o-transition: all 1s ease-out 0.6s; transition: all 1s ease-out 0.6s}
.info, #controls, #slides, #slider, #active, #active label, .info h3 {-webkit-transform: translatez(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out}

/* --- FINE --- */

<!-- [INIZIO] JSLIDER -->
<div class="jslider" id="jslider">

<!-- SETUP -->
<input checked type="radio" name="slider" id="slide1" > </input>
<input type="radio" name="slider" id="slide2" > </input>
<input type="radio" name="slider" id="slide3" > </input>
<input type="radio" name="slider" id="slide4" > </input>
<input type="radio" name="slider" id="slide5" > </input>


<!-- SLIDER -->

<div id="slides">
<div id="overflow">
<div class="content">

<div class="article">
<!-- INSERIRE CONTENUTO PANNELLO1 --!>

<a href="/">Lorem Ipsum</a> è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.


<!-- FINE PANNELLO 1 --!>
</div>

<div class="article">
<!-- INSERIRE CONTENUTO PANNELLO2 --!>

Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.


<!-- FINE PANNELLO 2 --!>
</div>

<div class="article">
<!-- INSERIRE CONTENUTO PANNELLO3 --!>

Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.


<!-- FINE PANNELLO 3 --!>
</div>

<div class="article">
<!-- INSERIRE CONTENUTO PANNELLO4 --!>

Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.


<!-- FINE PANNELLO 4 --!>
</div>

<div class="article">
<!-- INSERIRE CONTENUTO PANNELLO5 --!>

Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.


<!-- FINE PANNELLO 5 --!>
</div>

</div> <!-- .content -->

</div> <!-- #overflow -->

</div> <!-- #slides -->

<!-- CREDITI --!>
<div class="jcredits">
<a href="http://ffreport.forumcommunity.net/?t=52622702">Jslider 1.0</a>, realizzata da <a href="http://ffreport.forumcommunity.net/">FFreport</a>
</div>

<!-- FINE --!>


<!-- Controls and Active Slide Display -->

<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>

</div>
<!-- #controls -->

<div id="active">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div> <!-- #active -->

</div> <!-- #jslider -->