Jslider 1.0

<style>
/*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%}
#slide6:checked ~ #slides .content {margin-left: -500%}

/* NUMERO PANNELLI X 100 = .content {width: ---%} */
#slides .content {width: 600%}
/* .content {width: ---%}: NUMERO PANNELLI= .article {width: ---%} */
#slides .article {width: 16%; float: left; margin: 15px;}

/* 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(6),
#slide6: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(6),
#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),
#slide6:checked ~ #controls label:nth-child(5) {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),
#slide6:checked ~ #active label:nth-child(6) {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,
#slide6:checked ~ #slides article:nth-child(6) .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 --- */
</style>