diff --git a/README.md b/README.md index ed1d4f3..bf4379a 100644 --- a/README.md +++ b/README.md @@ -7,16 +7,16 @@ ## Instalación -Aloja el archivo `sheetslider.min.css` e incluir arriba de `` el codigo css. +Aloja el archivo `sheetslider.min.css` e incluir arriba de ``: ```html - + ``` -Tambien puedes cargar los estilos desde la cdn de rawgit: +Tambien puedes cargar los estilos desde la cdn: ```html - + ``` ## Modo de uso @@ -37,7 +37,8 @@ Solo hay que seguir el ejemplo del archivo **index.html**. Esta sería la forma ``` -Para incluir la botonera; duplicar `
...
` y cambiar **sh__arrows** por **sh__btns** + +Para incluir la botonera, duplicar `
...
` y cambiar **sh__arrows** por **sh__btns** ## Relacion de aspecto @@ -45,13 +46,13 @@ Para incluir la botonera; duplicar `
...
` y cambiar | ------------ | ----------------------------------- | | `sh-21r9` | Apaisado | | `sh-16r9` | Rectangular | -| `sh-4r3` | Desvanecimiento suave | +| `sh-4r3` | Estándar | | `sh-1r1` | Cuadrado perfecto | La clase se establece en la etiqueta principal del slider. Si no se especifica se utiliza "**apaisado**" por defecto. Ejemplo: ```html -
+
``` ## Animaciones @@ -61,6 +62,7 @@ La clase se establece en la etiqueta principal del slider. Si no se especifica s | `sh-default` | Animacion por defecto (horizontal) | | `sh-vertical` | Pase de imagenes en vertical | | `sh-fade` | Desvanecimiento suave | +| `sh-flip` | Plegado vertical | La clase se establece en la etiqueta principal del slider y es obligatoria. Ejemplo: @@ -77,10 +79,10 @@ Aloja el archivo `sheetslider.min.js` e incluyelo en tu proyecto arriba de ` ``` -O desde una cdn con rawgit: +O desde una cdn: ```html - + ``` Incluye la clase `sh-auto` para iniciar la animacion, Ejemplo: diff --git a/changelog.md b/changelog.md index 31dd0cd..0c6507e 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # changelog +## v2.2.0 + +- Corregido error del modo automatico cuando no existen flechas +- Opcion para activar o desactivar el "pause" al posicionar el mouse sobre el slider +- Ahora el modo automatico inicia cuando los recursos hayan cargado +- Nueva animacion `sh-flip` disponible + ## v2.1.0 - Codigo modularizado (module pattern). diff --git a/dist/sheetslider.min.css b/dist/sheetslider.min.css index 2beaf7d..55a9f0d 100644 --- a/dist/sheetslider.min.css +++ b/dist/sheetslider.min.css @@ -1 +1 @@ -/*! Sheet Slider v2.1.0 | Copyright: 2018 zkreations | Licensed under MIT | github.com/zkreations/SheetSlider/blob/master/LICENSE */.sh__content,.sh__item{height:100%;width:100%}.sheetSlider{background-color:#121214;font-size:8px;line-height:1.5;position:relative;width:100%;padding-bottom:42.857143%;overflow:hidden;-webkit-font-smoothing:antialiased}.sh__btns,.sh__content,.sh__item,.sh__meta{position:absolute}.sh__btns,.sh__meta,.sheetSlider input{display:none}.sh-control,.sheetSlider a,.sheetSlider h4,.sheetSlider img,.sheetSlider label,.sheetSlider span{background:0 0;padding:0;margin:0;border:0;outline:0;box-shadow:0 0 transparent;text-decoration:none}.sh__content{-webkit-transition:-webkit-transform .7s cubic-bezier(.54,0,.1,1);transition:-webkit-transform .7s cubic-bezier(.54,0,.1,1);transition:transform .7s cubic-bezier(.54,0,.1,1);transition:transform .7s cubic-bezier(.54,0,.1,1),-webkit-transform .7s cubic-bezier(.54,0,.1,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.sh__item{display:block;top:0;left:0}.sh__item img{width:100%}.sh__meta{left:4em;top:4em;text-shadow:0 1px 1px rgba(0,0,0,.3),0 1px 5px rgba(0,0,0,.16);max-width:80%;opacity:0;-webkit-transform:translate3d(0,4em,0);transform:translate3d(0,4em,0);-webkit-transition:opacity .7s .3s,-webkit-transform .7s .3s;transition:opacity .7s .3s,-webkit-transform .7s .3s;transition:opacity .7s .3s,transform .7s .3s;transition:opacity .7s .3s,transform .7s .3s,-webkit-transform .7s .3s}.sh__meta h4{font-size:3.4em;font-weight:700}.sh__meta span{font-size:1.7em;font-weight:500;padding-top:.2em}.sh__meta h4,.sh__meta span{color:#fff;display:block}.sh__meta a{font-weight:500;-webkit-transition:color .5s;transition:color .5s;color:#009688}.sh__btns{bottom:0;left:0;right:0;z-index:10;padding-left:4em;padding-right:4em;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.sh__btns label{background-color:rgba(255,255,255,.5);cursor:pointer;margin:0 .2em;height:6px;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;-webkit-transition:background .5s;transition:background .5s}.sh__btns label:hover{background-color:rgba(255,255,255,1)}.sh-control,.sh__arrows{position:absolute;right:0;bottom:0;z-index:10;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;box-shadow:0 1px 1px rgba(0,0,0,.15)}.sh__arrows:hover,.sheetSlider:hover .sh-control,.sheetSlider:hover .sh__arrows{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.sh-control,.sh__arrows label{background-color:#fff;background-repeat:no-repeat;background-position:50%;cursor:pointer}.sh__arrows label{display:none;-webkit-transition:background-color .3s;transition:background-color .3s;width:50px;height:50px}.sh__arrows label:hover{background-color:rgba(255,255,255,.9)}.sh-control{background-image:url(../img/icons/pause.png);width:45px;height:45px;bottom:50px;background-color:#fff}.sh-control.is-active{background-image:url(../img/icons/play.png)}.sh-21r9{padding-bottom:42.857143%}.sh-16r9{padding-bottom:56.25%}.sh-4r3{padding-bottom:75%}.sh-1r1{padding-bottom:100%}.sh-default .sh__item:nth-child(2){left:100%}.sh-default .sh__item:nth-child(3){left:200%}.sh-default .sh__item:nth-child(4){left:300%}.sh-default .sh__item:nth-child(5){left:400%}.sh-default .sh__item:nth-child(6){left:500%}.sh-default .sh__item:nth-child(7){left:600%}.sh-default .sh__item:nth-child(8){left:700%}.sh-default .sh__item:nth-child(9){left:800%}.sh-default .sh__item:nth-child(10){left:900%}.sh-default input:nth-child(1):checked~.sh__content{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.sh-default input:nth-child(2):checked~.sh__content{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.sh-default input:nth-child(3):checked~.sh__content{-webkit-transform:translate3d(-200%,0,0);transform:translate3d(-200%,0,0)}.sh-default input:nth-child(4):checked~.sh__content{-webkit-transform:translate3d(-300%,0,0);transform:translate3d(-300%,0,0)}.sh-default input:nth-child(5):checked~.sh__content{-webkit-transform:translate3d(-400%,0,0);transform:translate3d(-400%,0,0)}.sh-default input:nth-child(6):checked~.sh__content{-webkit-transform:translate3d(-500%,0,0);transform:translate3d(-500%,0,0)}.sh-default input:nth-child(7):checked~.sh__content{-webkit-transform:translate3d(-600%,0,0);transform:translate3d(-600%,0,0)}.sh-default input:nth-child(8):checked~.sh__content{-webkit-transform:translate3d(-700%,0,0);transform:translate3d(-700%,0,0)}.sh-default input:nth-child(9):checked~.sh__content{-webkit-transform:translate3d(-800%,0,0);transform:translate3d(-800%,0,0)}.sh-default input:nth-child(10):checked~.sh__content{-webkit-transform:translate3d(-900%,0,0);transform:translate3d(-900%,0,0)}.sh-vertical .sh__item:nth-child(2){top:100%}.sh-vertical .sh__item:nth-child(3){top:200%}.sh-vertical .sh__item:nth-child(4){top:300%}.sh-vertical .sh__item:nth-child(5){top:400%}.sh-vertical .sh__item:nth-child(6){top:500%}.sh-vertical .sh__item:nth-child(7){top:600%}.sh-vertical .sh__item:nth-child(8){top:700%}.sh-vertical .sh__item:nth-child(9){top:800%}.sh-vertical .sh__item:nth-child(10){top:900%}.sh-vertical input:nth-child(1):checked~.sh__content{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.sh-vertical input:nth-child(2):checked~.sh__content{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.sh-vertical input:nth-child(3):checked~.sh__content{-webkit-transform:translate3d(0,-200%,0);transform:translate3d(0,-200%,0)}.sh-vertical input:nth-child(4):checked~.sh__content{-webkit-transform:translate3d(0,-300%,0);transform:translate3d(0,-300%,0)}.sh-vertical input:nth-child(5):checked~.sh__content{-webkit-transform:translate3d(0,-400%,0);transform:translate3d(0,-400%,0)}.sh-vertical input:nth-child(6):checked~.sh__content{-webkit-transform:translate3d(0,-500%,0);transform:translate3d(0,-500%,0)}.sh-vertical input:nth-child(7):checked~.sh__content{-webkit-transform:translate3d(0,-600%,0);transform:translate3d(0,-600%,0)}.sh-vertical input:nth-child(8):checked~.sh__content{-webkit-transform:translate3d(0,-700%,0);transform:translate3d(0,-700%,0)}.sh-vertical input:nth-child(9):checked~.sh__content{-webkit-transform:translate3d(0,-800%,0);transform:translate3d(0,-800%,0)}.sh-vertical input:nth-child(10):checked~.sh__content{-webkit-transform:translate3d(0,-900%,0);transform:translate3d(0,-900%,0)}.sh-fade .sh__item{opacity:0;-webkit-transition:opacity .7s cubic-bezier(.54,0,.1,1);transition:opacity .7s cubic-bezier(.54,0,.1,1)}.sh-fade input:nth-child(1):checked~.sh__content .sh__item:nth-child(1),.sh-fade input:nth-child(10):checked~.sh__content .sh__item:nth-child(10),.sh-fade input:nth-child(2):checked~.sh__content .sh__item:nth-child(2),.sh-fade input:nth-child(3):checked~.sh__content .sh__item:nth-child(3),.sh-fade input:nth-child(4):checked~.sh__content .sh__item:nth-child(4),.sh-fade input:nth-child(5):checked~.sh__content .sh__item:nth-child(5),.sh-fade input:nth-child(6):checked~.sh__content .sh__item:nth-child(6),.sh-fade input:nth-child(7):checked~.sh__content .sh__item:nth-child(7),.sh-fade input:nth-child(8):checked~.sh__content .sh__item:nth-child(8),.sh-fade input:nth-child(9):checked~.sh__content .sh__item:nth-child(9){opacity:1;z-index:1}.sheetSlider input:nth-child(1):checked~.sh__content .sh__item:nth-child(1) .sh__meta,.sheetSlider input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) .sh__meta,.sheetSlider input:nth-child(2):checked~.sh__content .sh__item:nth-child(2) .sh__meta,.sheetSlider input:nth-child(3):checked~.sh__content .sh__item:nth-child(3) .sh__meta,.sheetSlider input:nth-child(4):checked~.sh__content .sh__item:nth-child(4) .sh__meta,.sheetSlider input:nth-child(5):checked~.sh__content .sh__item:nth-child(5) .sh__meta,.sheetSlider input:nth-child(6):checked~.sh__content .sh__item:nth-child(6) .sh__meta,.sheetSlider input:nth-child(7):checked~.sh__content .sh__item:nth-child(7) .sh__meta,.sheetSlider input:nth-child(8):checked~.sh__content .sh__item:nth-child(8) .sh__meta,.sheetSlider input:nth-child(9):checked~.sh__content .sh__item:nth-child(9) .sh__meta{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2),.sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3),.sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4),.sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5),.sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6),.sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7),.sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8),.sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9),.sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10){background-image:url(../img/icons/right.png);display:block;float:right}.sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10),.sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2),.sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3),.sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4),.sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5),.sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6),.sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7),.sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8),.sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9),.sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9),.sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2),.sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3),.sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4),.sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5),.sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6),.sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7),.sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8){background-image:url(../img/icons/left.png);display:block;float:left}@media (min-width:576px){.sheetSlider{font-size:9px}.sh-control,.sh__arrows{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.sh__arrows{bottom:calc(4em + 6px)}.sh__arrows label{width:60px;height:60px}.sh-control{bottom:calc(4em + 66px)}}@media (min-width:768px){.sh__btns{display:-webkit-box;display:-ms-flexbox;display:flex}.sh__meta{display:block}}@media (min-width:992px){.sheetSlider{font-size:10px}}.sh__meta a:hover{color:#607D8B}.sheetSlider input:nth-child(1):checked~.sh__btns label:nth-child(1),.sheetSlider input:nth-child(10):checked~.sh__btns label:nth-child(10),.sheetSlider input:nth-child(2):checked~.sh__btns label:nth-child(2),.sheetSlider input:nth-child(3):checked~.sh__btns label:nth-child(3),.sheetSlider input:nth-child(4):checked~.sh__btns label:nth-child(4),.sheetSlider input:nth-child(5):checked~.sh__btns label:nth-child(5),.sheetSlider input:nth-child(6):checked~.sh__btns label:nth-child(6),.sheetSlider input:nth-child(7):checked~.sh__btns label:nth-child(7),.sheetSlider input:nth-child(8):checked~.sh__btns label:nth-child(8),.sheetSlider input:nth-child(9):checked~.sh__btns label:nth-child(9){background-color:#009688} \ No newline at end of file +/*! Sheet Slider v2.2.0 | Copyright: 2018 zkreations | Licensed under MIT | github.com/zkreations/SheetSlider/blob/master/LICENSE */.sheetSlider{background-color:#121214;font-size:8px;line-height:1.5;position:relative;width:100%;padding-bottom:42.857143%;overflow:hidden;-webkit-font-smoothing:antialiased}.sh__btns,.sh__meta,.sheetSlider input{display:none}.sh-control,.sheetSlider a,.sheetSlider h4,.sheetSlider img,.sheetSlider label,.sheetSlider span{background:0 0;padding:0;margin:0;border:0;outline:0;box-shadow:0 0 transparent;text-decoration:none}.sh__content{position:absolute;height:100%;width:100%;transition:transform .7s cubic-bezier(.54,0,.1,1);transform:translate3d(0,0,0)}.sh__item{display:block;position:absolute;top:0;left:0;width:100%;height:100%}.sh__item img{width:100%}.sh__meta{left:4em;top:4em;position:absolute;text-shadow:0 1px 1px rgba(0,0,0,.3),0 1px 5px rgba(0,0,0,.16);max-width:80%;opacity:0;transform:translate3d(0,4em,0);transition:opacity .7s .4s,transform .7s .4s}.sh__meta h4{font-size:3.4em;font-weight:700}.sh__meta span{font-size:1.7em;font-weight:500;padding-top:.2em}.sh__meta h4,.sh__meta span{color:#fff;display:block}.sh__meta a{font-weight:500;transition:color .5s}.sh__btns{bottom:0;left:0;right:0;position:absolute;z-index:10;padding-left:4em;padding-right:4em;justify-content:space-between}.sh__btns label{background-color:rgba(255,255,255,.5);cursor:pointer;margin:0 .2em;height:6px;flex:1 0 auto;transition:background .5s}.sh__btns label:hover{background-color:rgba(255,255,255,1)}.sh-control,.sh__arrows{position:absolute;right:0;bottom:0;z-index:10;transform:translate3d(0,0,0);transition:transform .3s;box-shadow:0 1px 1px rgba(0,0,0,.15)}.sh__arrows:hover,.sheetSlider:hover .sh-control,.sheetSlider:hover .sh__arrows{transform:translate3d(0,0,0)}.sh-control,.sh__arrows label{background-color:#fff;background-repeat:no-repeat;background-position:50%;cursor:pointer}.sh__arrows label{display:none;transition:background-color .3s;width:50px;height:50px}.sh__arrows label:hover{background-color:rgba(255,255,255,.9)}.sh-control{background-image:url(../img/icons/pause.png);width:45px;height:45px;bottom:50px;background-color:#fff}.sh-control.is-active{background-image:url(../img/icons/play.png)}.sh-21r9{padding-bottom:42.857143%}.sh-16r9{padding-bottom:56.25%}.sh-4r3{padding-bottom:75%}.sh-1r1{padding-bottom:100%}.sh-default .sh__item:nth-child(2){left:100%}.sh-default .sh__item:nth-child(3){left:200%}.sh-default .sh__item:nth-child(4){left:300%}.sh-default .sh__item:nth-child(5){left:400%}.sh-default .sh__item:nth-child(6){left:500%}.sh-default .sh__item:nth-child(7){left:600%}.sh-default .sh__item:nth-child(8){left:700%}.sh-default .sh__item:nth-child(9){left:800%}.sh-default .sh__item:nth-child(10){left:900%}.sh-default input:nth-child(1):checked~.sh__content{transform:translate3d(0,0,0)}.sh-default input:nth-child(2):checked~.sh__content{transform:translate3d(-100%,0,0)}.sh-default input:nth-child(3):checked~.sh__content{transform:translate3d(-200%,0,0)}.sh-default input:nth-child(4):checked~.sh__content{transform:translate3d(-300%,0,0)}.sh-default input:nth-child(5):checked~.sh__content{transform:translate3d(-400%,0,0)}.sh-default input:nth-child(6):checked~.sh__content{transform:translate3d(-500%,0,0)}.sh-default input:nth-child(7):checked~.sh__content{transform:translate3d(-600%,0,0)}.sh-default input:nth-child(8):checked~.sh__content{transform:translate3d(-700%,0,0)}.sh-default input:nth-child(9):checked~.sh__content{transform:translate3d(-800%,0,0)}.sh-default input:nth-child(10):checked~.sh__content{transform:translate3d(-900%,0,0)}.sh-vertical .sh__item:nth-child(2){top:100%}.sh-vertical .sh__item:nth-child(3){top:200%}.sh-vertical .sh__item:nth-child(4){top:300%}.sh-vertical .sh__item:nth-child(5){top:400%}.sh-vertical .sh__item:nth-child(6){top:500%}.sh-vertical .sh__item:nth-child(7){top:600%}.sh-vertical .sh__item:nth-child(8){top:700%}.sh-vertical .sh__item:nth-child(9){top:800%}.sh-vertical .sh__item:nth-child(10){top:900%}.sh-vertical input:nth-child(1):checked~.sh__content{transform:translate3d(0,0,0)}.sh-vertical input:nth-child(2):checked~.sh__content{transform:translate3d(0,-100%,0)}.sh-vertical input:nth-child(3):checked~.sh__content{transform:translate3d(0,-200%,0)}.sh-vertical input:nth-child(4):checked~.sh__content{transform:translate3d(0,-300%,0)}.sh-vertical input:nth-child(5):checked~.sh__content{transform:translate3d(0,-400%,0)}.sh-vertical input:nth-child(6):checked~.sh__content{transform:translate3d(0,-500%,0)}.sh-vertical input:nth-child(7):checked~.sh__content{transform:translate3d(0,-600%,0)}.sh-vertical input:nth-child(8):checked~.sh__content{transform:translate3d(0,-700%,0)}.sh-vertical input:nth-child(9):checked~.sh__content{transform:translate3d(0,-800%,0)}.sh-vertical input:nth-child(10):checked~.sh__content{transform:translate3d(0,-900%,0)}.sh-fade .sh__item{opacity:0;transition:opacity .7s cubic-bezier(.54,0,.1,1)}.sh-fade input:nth-child(1):checked~.sh__content .sh__item:nth-child(1),.sh-fade input:nth-child(10):checked~.sh__content .sh__item:nth-child(10),.sh-fade input:nth-child(2):checked~.sh__content .sh__item:nth-child(2),.sh-fade input:nth-child(3):checked~.sh__content .sh__item:nth-child(3),.sh-fade input:nth-child(4):checked~.sh__content .sh__item:nth-child(4),.sh-fade input:nth-child(5):checked~.sh__content .sh__item:nth-child(5),.sh-fade input:nth-child(6):checked~.sh__content .sh__item:nth-child(6),.sh-fade input:nth-child(7):checked~.sh__content .sh__item:nth-child(7),.sh-fade input:nth-child(8):checked~.sh__content .sh__item:nth-child(8),.sh-fade input:nth-child(9):checked~.sh__content .sh__item:nth-child(9){opacity:1;z-index:1}.sh-flip .sh__item{opacity:0;transition:transform .5s cubic-bezier(.54,0,.1,1),opacity .5s;transform:perspective(400px) rotate3d(1,0,0,10deg);transform-origin:bottom}.sh-flip input:nth-child(1):checked~.sh__content .sh__item:nth-child(1),.sh-flip input:nth-child(10):checked~.sh__content .sh__item:nth-child(10),.sh-flip input:nth-child(2):checked~.sh__content .sh__item:nth-child(2),.sh-flip input:nth-child(3):checked~.sh__content .sh__item:nth-child(3),.sh-flip input:nth-child(4):checked~.sh__content .sh__item:nth-child(4),.sh-flip input:nth-child(5):checked~.sh__content .sh__item:nth-child(5),.sh-flip input:nth-child(6):checked~.sh__content .sh__item:nth-child(6),.sh-flip input:nth-child(7):checked~.sh__content .sh__item:nth-child(7),.sh-flip input:nth-child(8):checked~.sh__content .sh__item:nth-child(8),.sh-flip input:nth-child(9):checked~.sh__content .sh__item:nth-child(9){transform:perspective(400px);opacity:1;z-index:1}.sheetSlider input:nth-child(1):checked~.sh__content .sh__item:nth-child(1) .sh__meta,.sheetSlider input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) .sh__meta,.sheetSlider input:nth-child(2):checked~.sh__content .sh__item:nth-child(2) .sh__meta,.sheetSlider input:nth-child(3):checked~.sh__content .sh__item:nth-child(3) .sh__meta,.sheetSlider input:nth-child(4):checked~.sh__content .sh__item:nth-child(4) .sh__meta,.sheetSlider input:nth-child(5):checked~.sh__content .sh__item:nth-child(5) .sh__meta,.sheetSlider input:nth-child(6):checked~.sh__content .sh__item:nth-child(6) .sh__meta,.sheetSlider input:nth-child(7):checked~.sh__content .sh__item:nth-child(7) .sh__meta,.sheetSlider input:nth-child(8):checked~.sh__content .sh__item:nth-child(8) .sh__meta,.sheetSlider input:nth-child(9):checked~.sh__content .sh__item:nth-child(9) .sh__meta{opacity:1;transform:translate3d(0,0,0)}.sheetSlider input:nth-child(1):checked~.sh__arrows label:nth-child(2),.sheetSlider input:nth-child(10):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(2):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(3),.sheetSlider input:nth-child(3):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(4),.sheetSlider input:nth-child(4):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(5),.sheetSlider input:nth-child(5):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(6),.sheetSlider input:nth-child(6):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(7),.sheetSlider input:nth-child(7):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(8),.sheetSlider input:nth-child(8):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(9),.sheetSlider input:nth-child(9):checked:last-of-type~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(10){background-image:url(../img/icons/right.png);display:block;float:right}.sheetSlider input:nth-child(1):checked~input:nth-child(10):last-of-type~.sh__arrows label:nth-child(10),.sheetSlider input:nth-child(1):checked~input:nth-child(2):last-of-type~.sh__arrows label:nth-child(2),.sheetSlider input:nth-child(1):checked~input:nth-child(3):last-of-type~.sh__arrows label:nth-child(3),.sheetSlider input:nth-child(1):checked~input:nth-child(4):last-of-type~.sh__arrows label:nth-child(4),.sheetSlider input:nth-child(1):checked~input:nth-child(5):last-of-type~.sh__arrows label:nth-child(5),.sheetSlider input:nth-child(1):checked~input:nth-child(6):last-of-type~.sh__arrows label:nth-child(6),.sheetSlider input:nth-child(1):checked~input:nth-child(7):last-of-type~.sh__arrows label:nth-child(7),.sheetSlider input:nth-child(1):checked~input:nth-child(8):last-of-type~.sh__arrows label:nth-child(8),.sheetSlider input:nth-child(1):checked~input:nth-child(9):last-of-type~.sh__arrows label:nth-child(9),.sheetSlider input:nth-child(10):checked~.sh__arrows label:nth-child(9),.sheetSlider input:nth-child(2):checked~.sh__arrows label:nth-child(1),.sheetSlider input:nth-child(3):checked~.sh__arrows label:nth-child(2),.sheetSlider input:nth-child(4):checked~.sh__arrows label:nth-child(3),.sheetSlider input:nth-child(5):checked~.sh__arrows label:nth-child(4),.sheetSlider input:nth-child(6):checked~.sh__arrows label:nth-child(5),.sheetSlider input:nth-child(7):checked~.sh__arrows label:nth-child(6),.sheetSlider input:nth-child(8):checked~.sh__arrows label:nth-child(7),.sheetSlider input:nth-child(9):checked~.sh__arrows label:nth-child(8){background-image:url(../img/icons/left.png);display:block;float:left}@media (min-width:576px){.sheetSlider{font-size:9px}.sh-control,.sh__arrows{transform:translate3d(100%,0,0)}.sh__arrows{bottom:calc(4em + 6px)}.sh__arrows label{width:60px;height:60px}.sh-control{bottom:calc(4em + 66px)}}@media (min-width:768px){.sh__btns{display:flex}.sh__meta{display:block}}@media (min-width:992px){.sheetSlider{font-size:10px}}.sh__meta a{color:#009688}.sh__meta a:hover{color:#607d8b}.sheetSlider input:nth-child(1):checked~.sh__btns label:nth-child(1),.sheetSlider input:nth-child(10):checked~.sh__btns label:nth-child(10),.sheetSlider input:nth-child(2):checked~.sh__btns label:nth-child(2),.sheetSlider input:nth-child(3):checked~.sh__btns label:nth-child(3),.sheetSlider input:nth-child(4):checked~.sh__btns label:nth-child(4),.sheetSlider input:nth-child(5):checked~.sh__btns label:nth-child(5),.sheetSlider input:nth-child(6):checked~.sh__btns label:nth-child(6),.sheetSlider input:nth-child(7):checked~.sh__btns label:nth-child(7),.sheetSlider input:nth-child(8):checked~.sh__btns label:nth-child(8),.sheetSlider input:nth-child(9):checked~.sh__btns label:nth-child(9){background-color:#009688} \ No newline at end of file diff --git a/dist/sheetslider.min.js b/dist/sheetslider.min.js index d6b52d8..dc2663d 100644 --- a/dist/sheetslider.min.js +++ b/dist/sheetslider.min.js @@ -1 +1,5 @@ -/*! Sheet Slider v2.1.0 | Copyright: 2018 zkreations | Licensed under MIT | github.com/zkreations/SheetSlider/blob/master/LICENSE */var sheetSlider=function(){function e(){r=setInterval(t,1e3*l)}function t(){for(var e=0;eSheet Slider imgText
-

2 Weeks

- Secondary text with link +

Artwork surreal

+ Secondary text without link
@@ -48,8 +48,8 @@

2 Weeks

imgText
-

Artwork surreal

- Secondary text without link +

2 Weeks

+ Secondary text with link
@@ -68,8 +68,8 @@

Cat under a carpet

imgText
-

Watercolor landscape

- Secondary text with link +

Sheet

+ Secondary text without link
@@ -85,7 +85,7 @@

Cute girl and cat

- +
@@ -110,9 +110,13 @@

Cute girl and cat

Instalar

-

Para empezar aloja el archivo sheetslider.min.css e incluyelo arriba de </head> de esta manera:

+

Sube el archivo sheetslider.min.css e incluyelo arriba de </head>

-
<link rel="stylesheet" href="dist/sheetslider.min.css"/>
+
<link rel="stylesheet" href="sheetslider.min.css"/>
+ +

O cargalo desde una cdn con jsdelivr:

+ +
<link href="//cdn.jsdelivr.net/gh/zkreations/SheetSlider@2.2.0/dist/sheetslider.min.css" rel="stylesheet"/>

Estructura

Algunos elementos de la estructura html son opcionales y no impedirán que el slider funcione. Esta sería la estructura básica sin botonera y sin textos:

@@ -131,112 +135,20 @@

Estructura

</div>

Animación

-

Las animaciones las controla la clase sh-default, es obligatoria y establece la animación por defecto. Cambia default por vertical o fade para cambiar el efecto de transición:

+

Las animaciones las controla la clase sh-default, es obligatoria y establece la animación por defecto. Cambia default por vertical, fade o flip para cambiar el efecto de transición:

<div class="sheetSlider sh-vertical">
-<div class="sheetSlider sh-fade">
- -

Vertical

- - -
- - - -
+<div class="sheetSlider sh-fade"> +<div class="sheetSlider sh-flip"> - -
- imgText - -
-

Autumn tree

- Secondary text without link -
-
- - -
- imgText - -
-

Landscape wood

- Secondary text without link -
-
- - -
- imgText - -
-

Nature arts

- Secondary text without link -
-
- -
- - -
- - - -
- -
- -

fade

- -
- - - -
- - -
- imgText - -
-

Sheet

- Secondary text without link -
-
- - -
- imgText - -
-

Bridge

- Secondary text without link -
-
- - -
- imgText - -
-

Woman

- Secondary text without link -
-
-
+

Auto slide

+

El slider carece de animación automatica mediante css puro, pero si se desea, aloja el archivo sheetslider.min.js e incluyelo en tu proyecto arriba de </body>

- -
- - - -
-
+
<script src="sheetslider.min.js"></script>
-

Auto slide

-

El slider carece de animación automatica mediante css puro, pero si se desea, aloja el archivo sheetslider.min.js e incluyelo en tu proyecto arriba de </body> de la siguiente forma:

+

O cargalo desde una cdn con jsdelivr:

-
<script src="dist/sheetslider.min.js"></script>
+
<link href="//cdn.jsdelivr.net/gh/zkreations/SheetSlider@2.2.0/dist/sheetslider.min.js" rel="stylesheet"/>

Ahora agrega la clase sh__auto al contenedor principal de la siguiente manera:

diff --git a/source/sheetslider.css b/source/sheetslider.css index 1f95390..44d1e24 100644 --- a/source/sheetslider.css +++ b/source/sheetslider.css @@ -1,5 +1,5 @@ /*! -=> Sheet Slider v2.1.0 +=> Sheet Slider v2.2.0 => Copyright: 2018 zkreations => Licensed under MIT | github.com/zkreations/SheetSlider/blob/master/LICENSE */ @@ -66,7 +66,7 @@ max-width: 80%; opacity: 0; transform: translate3d(0, 4em, 0); - transition: opacity .7s .3s,transform .7s .3s; + transition: opacity .7s .4s,transform .7s .4s; } .sh__meta h4 { font-size: 3.4em; @@ -236,6 +236,28 @@ .sh-fade input:nth-child(9):checked~.sh__content .sh__item:nth-child(9), .sh-fade input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) {opacity: 1;z-index: 1;} +/* Animacion flip*/ +.sh-flip .sh__item { + opacity: 0; + transition: transform .5s cubic-bezier(.54,0,.1,1), opacity .5s; + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform-origin: bottom; +} +.sh-flip input:nth-child(1):checked~.sh__content .sh__item:nth-child(1), +.sh-flip input:nth-child(2):checked~.sh__content .sh__item:nth-child(2), +.sh-flip input:nth-child(3):checked~.sh__content .sh__item:nth-child(3), +.sh-flip input:nth-child(4):checked~.sh__content .sh__item:nth-child(4), +.sh-flip input:nth-child(5):checked~.sh__content .sh__item:nth-child(5), +.sh-flip input:nth-child(6):checked~.sh__content .sh__item:nth-child(6), +.sh-flip input:nth-child(7):checked~.sh__content .sh__item:nth-child(7), +.sh-flip input:nth-child(8):checked~.sh__content .sh__item:nth-child(8), +.sh-flip input:nth-child(9):checked~.sh__content .sh__item:nth-child(9), +.sh-flip input:nth-child(10):checked~.sh__content .sh__item:nth-child(10) { + transform: perspective(400px); + opacity: 1; + z-index: 1; +} + /* Mostrar el texto ------------------------------------*/ .sheetSlider input:nth-child(1):checked~.sh__content .sh__item:nth-child(1) .sh__meta, diff --git a/source/sheetslider.js b/source/sheetslider.js index 1eb643a..46b5e58 100644 --- a/source/sheetslider.js +++ b/source/sheetslider.js @@ -1,28 +1,30 @@ /*! -=> Sheet Slider v2.1.0 +=> Sheet Slider v2.2.0 => Copyright: 2018 zkreations => Licensed under MIT | github.com/zkreations/SheetSlider/blob/master/LICENSE */ var sheetSlider = (function(){ -var sliderTime = 3, // Cantidad de segundos de la animacion +var animateDelay = 4000, + autoplayHoverPause = false, auto, slides = document.querySelectorAll(".sh-auto input"), sliderContent = document.querySelector(".sh-auto .sh__content"), sliderButtons = document.querySelectorAll(".sh-auto .sh__btns label"), sliderArrows = document.querySelectorAll(".sh-auto .sh__arrows label"), sliderControl = document.querySelector(".sh-control"), sliderStoped = false; -// Pausar la animacion si el puntero esta sobre el contenido, -// continuar cuando se retire -sliderContent.addEventListener("mouseover", pauseSlider); -sliderContent.addEventListener("mouseout", playSlider); +// Pausar la animacion si el puntero esta sobre el contenido +if (autoplayHoverPause) { + sliderContent.addEventListener("mouseover", pauseSlider); + sliderContent.addEventListener("mouseout", playSlider); +} if(sliderControl) sliderControl.addEventListener("click", playPauseButton); -// Creamos el interval para marcar los input[radio] +// Marcar los input[radio] function setInput(){ - auto = setInterval(autoSlides, sliderTime * 1000); + auto = setInterval(autoSlides, animateDelay); } function autoSlides() { @@ -61,13 +63,17 @@ for (var i = 0; i < slides.length; i++) { playSlider(); }); } + if (sliderArrows.length){ // Pausar si las flechas reciben un clic sliderArrows[i].addEventListener("click", function() { pauseSlider(); playSlider(); }); + } } - -setInput(); - + +window.addEventListener("load",function(){ + setInput(); +}); + })(); \ No newline at end of file