<div class="spacer"></div>
<div class="arrow" onclick="mySlideLeft()"><img src="http://cerati.org/eoitecne/img/down.png" class="arrowleft arimage"/></div><div class="slider-cont" id="slider-cont"><!--<div class="slider-layer" id="slider-cont"></div>--><div class="test-slider">
<div
class="cont-slider" onclick="selectSliderElement(this)" id="ext-1"><img class="flat-w-image image-slider" src="http://cerati.org/eoitecne/imghttp://cerati.org/eoitecne//prodotti/05.png"/><img src="http://cerati.org/eoitecne/img/prodotti/05.png" class="image-w"/></div><div
class="cont-slider" onclick="selectSliderElement(this)" id="ext-2"><img class="flat-w-image image-slider" src="http://cerati.org/eoitecne/img/prodotti/02.png"/><img src="http://cerati.org/eoitecne/img/prodotti/02.png" class="image-w"/></div><div
class="cont-slider" onclick="selectSliderElement(this)" id="ext-3"><img class="flat-w-image image-slider" src="http://cerati.org/eoitecne/img/prodotti/05.png"/><img src="http://cerati.org/eoitecne/img/prodotti/05.png" class="image-w"/></div><div
class="cont-slider" onclick="selectSliderElement(this)" id="ext-4"><img class="flat-w-image image-slider" src="http://cerati.org/eoitecne/img/prodotti/02.png"/><img src="http://cerati.org/eoitecne/img/prodotti/02.png" class="image-w"/></div><div
class="cont-slider" onclick="selectSliderElement(this)" id="ext-5"><img class="flat-w-image image-slider" src="http://cerati.org/eoitecne/img/prodotti/05.png"/><img src="http://cerati.org/eoitecne/img/prodotti/05.png" class="image-w"/></div><div
class="cont-slider" onclick="selectSliderElement(this)" id="ext-6"><img class="flat-w-image image-slider" src="http://cerati.org/eoitecne/img/prodotti/02.png"/><img src="http://cerati.org/eoitecne/img/prodotti/02.png" class="image-w"/></div><div
class="cont-slider" onclick="selectSliderElement(this)" id="ext-7"><img class="flat-w-image image-slider" src="http://cerati.org/eoitecne/img/prodotti/05.png"/><img src="http://cerati.org/eoitecne/img/prodotti/05.png" class="image-w"/></div><div
class="cont-slider" onclick="selectSliderElement(this)" id="ext-8"><img class="flat-w-image image-slider" src="http://cerati.org/eoitecne/img/prodotti/02.png"/><img src="http://cerati.org/eoitecne/img/prodotti/02.png" class="image-w"/></div>
</div></div><div class="arrow" onclick="mySlideRight()"><img src="http://cerati.org/eoitecne/img/down.png" class="arrowright arimage"/></div>
.spacer{margin-top:100px;}
.alignleft {
text-align:left;
}
.alignright {
text-align:right;
}
#ext-1 {
position:absolute;
height:100%;
z-index:5;
}
#ext-2 {
position:absolute;
height:100%;
transform:scale(0.8) translateX(-20vw);
z-index:4;}
#ext-2 .image-w{
opacity:0.8
}
#ext-3 {
position:absolute;
height:100%;
transform:scale(0.6) translateX(-30vw);
z-index:3;}
#ext-3 .image-w{
opacity:0.6
}
#ext-4 {
position:absolute;
height:100%;
transform:scale(0.4) translateX(-20vw);
z-index:2;}
#ext-4 .image-w{
opacity:0.2
}
#ext-5
{
position:absolute;
height:100%;
transform:scale(0.2);
z-index:1;}
#ext-5 .image-w{
opacity:0;
}
#ext-6 {
position:absolute;
height:100%;
transform:scale(0.4) translateX(20vw);
z-index:2;}
#ext-6 .image-w{
opacity:0.2
}
#ext-7 {
position:absolute;
height:100%;
transform:scale(0.6) translateX(30vw);
z-index:3;}
#ext-7 .image-w{
opacity:0.6
}
#ext-8
{
position:absolute;
height:100%;
transform:scale(0.8) translateX(20vw);
z-index:4;}
#ext-8 .image-w{
opacity:0.8
}
.slider-cont {
width:80%;
position:relative;
display:inline-block;
}
.image-slider {
height:100%;
position:absolute;
}
.cont-slider {
display:inline-block;
vertical-align:middle;
transform-origin: top;
transition:all 500ms cubic-bezier(0.71, 0.57, 0.01, 0.98);
}
.slider-layer {
position:absolute;
z-index:6;
width:100%;
height:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+26,0+50,0+77,1+100 */
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 77%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 77%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 77%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
.test-slider {
position:relative;
width:30%;
height:0;
padding-bottom:30%;
margin-left:35%;
}
.image-w {
height:100%;
position:absolute;
}
.arrow {
display:inline-block;
width:10%;
opacity:0.3;
vertical-align: top;
}
.arrow:hover{cursor:pointer}
.arimage {
width:100%;
}
.arrowleft {
transform:rotate(90deg)
}
.arrowright {
transform:rotate(-90deg)
}
.flat-w-image {
-webkit-filter:contrast(0) brightness(10);
filter:contrast(0) brightness(10);
}
window.onload=function(){
(function(d){/* FUNZIONE EVENTI SWIPE DESTRA SINISTRA SU GIU'*/
var
ce=function(e,n){var a=document.createEvent("CustomEvent");a.initCustomEvent(n,true,true,e.target);e.target.dispatchEvent(a);a=null;return false},
nm=true,sp={x:0,y:0},ep={x:0,y:0},
touch={
touchstart:function(e){sp={x:e.touches[0].pageX,y:e.touches[0].pageY}},
touchmove:function(e){nm=false;ep={x:e.touches[0].pageX,y:e.touches[0].pageY}},
touchend:function(e){if(nm){ce(e,'fc')}else{var x=ep.x-sp.x,xr=Math.abs(x),y=ep.y-sp.y,yr=Math.abs(y);if(Math.max(xr,yr)>20){ce(e,(xr>yr?(x<0?'swl':'swr'):(y<0?'swu':'swd')))}};nm=true},
touchcancel:function(e){nm=false}
};
for(var a in touch){d.addEventListener(a,touch[a],false);}
})(document);
var h=function(e){console.log(e.type,e)};
document.body.addEventListener('fc',h,false);// 0-50ms vs 500ms with normal click
/*SWIPE A DESTRA*/
document.getElementById('slider-cont').addEventListener('swr',mySlideRight,false);
/*SWIPE A SINISTRA*/
document.getElementById('slider-cont').addEventListener('swl',mySlideLeft,false);
/*document.body.addEventListener('swu',h,false);
document.body.addEventListener('swd',h,false);*/
}
function mySlideRight(){
/*SE SWIPE SULLA DESTRA*/
/*Seleziona tutte le immagini della slide*/
var sli=document.getElementsByClassName('cont-slider');
for(var i=0;i<sli.length;i++){
/*Se è la prima immagine, diventa l'ultima*/
if(sli[i].id=="ext-1"){sli[i].id='ext-8'}else{
/*Se non è la prima immagine...*/
var eid=sli[i].id;
var strnum = eid.match(/\d+$/)[0];
var num=parseInt(strnum);
/*...scorre indietro di uno*/
strnum--;
sli[i].id='ext-'+strnum;
}
}
}
function mySlideLeft(){
/*SE SWIPE SULLA SINISTRA*/
/*Seleziona tutte le immagini della slide*/
var sli=document.getElementsByClassName('cont-slider');
for(var i=0;i<sli.length;i++){
/*Se è l'ultima immagine, diventa la prima*/
if(sli[i].id=="ext-8"){sli[i].id='ext-1'}else{
/*Se non è l'ultima immagine...*/
var eid=sli[i].id;
var strnum = eid.match(/\d+$/)[0];
var num=parseInt(strnum);
/*...scorre avanti di unos*/
strnum++;
sli[i].id='ext-'+strnum;
}
}
}
function selectSliderElement(e){
/*Se viene cliccato un elemento della slider, viene in primo piano*/
var idd=e.id;
var numstr = idd.match(/\d+$/)[0];
var numid=parseInt(numstr);
var sli=document.getElementsByClassName('cont-slider');
if(numid==1){}else{
var times=9-numid;
for (var z=0;z<times;z++)
for(var i=0;i<sli.length;i++){
/*Se è l'ultima immagine, diventa la prima*/
if(sli[i].id=="ext-8"){sli[i].id='ext-1'}else{
/*Se non è l'ultima immagine...*/
var eid=sli[i].id;
var strnum = eid.match(/\d+$/)[0];
var num=parseInt(strnum);
/*...scorre avanti di unos*/
strnum++;
sli[i].id='ext-'+strnum;
}
}}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.