Skip to content

Commit

Permalink
v2.2.0
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@danieIabel
danieIabel committed Jul 30, 2018
1 parent 9a39b56 commit e8b5637
Show file tree
Hide file tree
Showing 16 changed files with 86 additions and 133 deletions.
20 changes: 11 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@

## Instalación

Aloja el archivo `sheetslider.min.css` e incluir arriba de `</head>` el codigo css.
Aloja el archivo `sheetslider.min.css` e incluir arriba de `</head>`:

```html
<link rel="stylesheet" href="dist/sheetslider.min.css"/>
<link rel="stylesheet" href="sheetslider.min.css"/>
```

Tambien puedes cargar los estilos desde la cdn de rawgit:
Tambien puedes cargar los estilos desde la cdn:

```html
<link rel="stylesheet" href="https://cdn.rawgit.com/zkreations/SheetSlider/master/dist/sheetslider.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/zkreations/SheetSlider@2.2.0/dist/sheetslider.min.css"/>
```

## Modo de uso
Expand All @@ -37,21 +37,22 @@ Solo hay que seguir el ejemplo del archivo **index.html**. Esta sería la forma
</div>
</div>
```
Para incluir la botonera; duplicar `<div class="sh__arrows">...</div>` y cambiar **sh__arrows** por **sh__btns**

Para incluir la botonera, duplicar `<div class="sh__arrows">...</div>` y cambiar **sh__arrows** por **sh__btns**

## Relacion de aspecto

| Clase | Description |
| ------------ | ----------------------------------- |
| `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
<div class="sheetSlider sh-21r9">
<div class="sheetSlider sh-16r9">
```

## Animaciones
Expand All @@ -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:
Expand All @@ -77,10 +79,10 @@ Aloja el archivo `sheetslider.min.js` e incluyelo en tu proyecto arriba de `</bo
<script src="dist/sheetslider.min.js"></script>
```

O desde una cdn con rawgit:
O desde una cdn:

```html
<script src="https://cdn.rawgit.com/zkreations/SheetSlider/master/dist/sheetslider.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/zkreations/SheetSlider@2.2.0/dist/sheetslider.min.js"></script>
```

Incluye la clase `sh-auto` para iniciar la animacion, Ejemplo:
Expand Down
7 changes: 7 additions & 0 deletions changelog.md
View file
Original file line number Diff line number Diff line change
@@ -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).
Expand Down
2 changes: 1 addition & 1 deletion dist/sheetslider.min.css
View file

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion dist/sheetslider.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file modified img/slide-img01.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/slide-img02.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/slide-img04.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed img/slide-img06.jpg
View file
Binary file not shown.
Binary file removed img/slide-img07.jpg
View file
Binary file not shown.
Binary file removed img/slide-img08.jpg
View file
Binary file not shown.
Binary file removed img/slide-img09.jpg
View file
Binary file not shown.
Binary file removed img/slide-img10.jpg
View file
Binary file not shown.
Binary file removed img/slide-img11.jpg
View file
Binary file not shown.
130 changes: 21 additions & 109 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ <h1>Sheet Slider</h1>
<img src="img/slide-img01.jpg" alt="imgText"/>
<!-- Item Info -->
<div class="sh__meta">
<h4>2 Weeks</h4>
<span>Secondary text <a href="#urlPage">with link</a></span>
<h4>Artwork surreal</h4>
<span>Secondary text without link</span>
</div>
</div>

Expand All @@ -48,8 +48,8 @@ <h4>2 Weeks</h4>
<img src="img/slide-img02.jpg" alt="imgText"/>
<!-- Item Info -->
<div class="sh__meta">
<h4>Artwork surreal</h4>
<span>Secondary text without link</span>
<h4>2 Weeks</h4>
<span>Secondary text <a href="#urlPage">with link</a></span>
</div>
</div>

Expand All @@ -68,8 +68,8 @@ <h4>Cat under a carpet</h4>
<img src="img/slide-img04.jpg" alt="imgText"/>
<!-- Item Info -->
<div class="sh__meta">
<h4>Watercolor landscape</h4>
<span>Secondary text <a href="#urlPage">with link</a></span>
<h4>Sheet</h4>
<span>Secondary text without link</span>
</div>
</div>

Expand All @@ -85,7 +85,7 @@ <h4>Cute girl and cat</h4>

</div><!-- .sh__content -->

<!--botones-->
<!--botones -->
<div class="sh__btns">
<label for="s1"></label>
<label for="s2"></label>
Expand All @@ -110,9 +110,13 @@ <h4>Cute girl and cat</h4>


<h2>Instalar</h2>
<p>Para empezar aloja el archivo <strong>sheetslider.min.css</strong> e incluyelo arriba de <code>&lt;/head&gt;</code> de esta manera:</p>
<p>Sube el archivo <strong>sheetslider.min.css</strong> e incluyelo arriba de <code>&lt;/head&gt;</code></p>

<pre class="code">&lt;link rel="stylesheet" href="dist/sheetslider.min.css"/&gt;</pre>
<pre class="code">&lt;link rel="stylesheet" href="sheetslider.min.css"/&gt;</pre>

<p>O cargalo desde una <strong>cdn</strong> con jsdelivr:</p>

<pre class="code">&lt;link href="//cdn.jsdelivr.net/gh/zkreations/SheetSlider@2.2.0/dist/sheetslider.min.css" rel="stylesheet"/&gt;</pre>

<h2>Estructura</h2>
<p>Algunos elementos de la estructura html son opcionales y no impedirán que el slider funcione. Esta sería la <strong>estructura básica</strong> sin botonera y sin textos:</p>
Expand All @@ -131,112 +135,20 @@ <h2>Estructura</h2>
&lt;/div&gt;</pre>

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

<pre class="code">&lt;div class="sheetSlider sh-vertical"&gt;
&lt;div class="sheetSlider sh-fade"&gt;</pre>

<h2>Vertical</h2>

<!--Sheet Slider sh-vertical-->
<div class="sheetSlider sh-vertical">
<input id="a1" type="radio" name="slide2" checked/>
<input id="a2" type="radio" name="slide2"/>
<input id="a3" type="radio" name="slide2"/>
<div class="sh__content">
&lt;div class="sheetSlider sh-fade"&gt;
&lt;div class="sheetSlider sh-flip"&gt;</pre>

<!-- Slider Item -->
<div class="sh__item">
<img src="img/slide-img06.jpg" alt="imgText"/>
<!-- Item Info -->
<div class="sh__meta">
<h4>Autumn tree</h4>
<span>Secondary text without link</span>
</div>
</div>

<!-- Slider Item -->
<div class="sh__item">
<img src="img/slide-img07.jpg" alt="imgText"/>
<!-- Item Info -->
<div class="sh__meta">
<h4>Landscape wood</h4>
<span>Secondary text without link</span>
</div>
</div>

<!-- Slider Item -->
<div class="sh__item">
<img src="img/slide-img08.jpg" alt="imgText"/>
<!-- Item Info -->
<div class="sh__meta">
<h4>Nature arts</h4>
<span>Secondary text without link</span>
</div>
</div>

</div><!-- .sh__content -->

<!--flechas-->
<div class="sh__arrows">
<label for="a1"></label>
<label for="a2"></label>
<label for="a3"></label>
</div><!-- .sh__arrows -->

</div><!-- .sheetSlider -->

<h2>fade</h2>
<!--Sheet Slider sh-vertical-->
<div class="sheetSlider sh-fade">
<input id="b1" type="radio" name="slide3" checked/>
<input id="b2" type="radio" name="slide3"/>
<input id="b3" type="radio" name="slide3"/>
<div class="sh__content">

<!-- Slider Item -->
<div class="sh__item">
<img src="img/slide-img09.jpg" alt="imgText"/>
<!-- Item Info -->
<div class="sh__meta">
<h4>Sheet</h4>
<span>Secondary text without link</span>
</div>
</div>

<!-- Slider Item -->
<div class="sh__item">
<img src="img/slide-img10.jpg" alt="imgText"/>
<!-- Item Info -->
<div class="sh__meta">
<h4>Bridge</h4>
<span>Secondary text without link</span>
</div>
</div>

<!-- Slider Item -->
<div class="sh__item">
<img src="img/slide-img11.jpg" alt="imgText"/>
<!-- Item Info -->
<div class="sh__meta">
<h4>Woman</h4>
<span>Secondary text without link</span>
</div>
</div>
</div><!-- .sh__content -->
<h2>Auto slide</h2>
<p>El slider carece de animación automatica mediante css puro, pero si se desea, aloja el archivo <strong>sheetslider.min.js</strong> e incluyelo en tu proyecto arriba de <code>&lt;/body&gt;</code></p>

<!--flechas-->
<div class="sh__arrows">
<label for="b1"></label>
<label for="b2"></label>
<label for="b3"></label>
</div><!-- .sh__arrows -->
</div><!-- .sheetSlider -->
<pre class="code">&lt;script src="sheetslider.min.js"&gt;&lt;/script&gt;</pre>

<h2>Auto slide</h2>
<p>El slider carece de animación automatica mediante css puro, pero si se desea, aloja el archivo <strong>sheetslider.min.js</strong> e incluyelo en tu proyecto arriba de <code>&lt;/body&gt;</code> de la siguiente forma:</p>
<p>O cargalo desde una <strong>cdn</strong> con jsdelivr:</p>

<pre class="code">&lt;script src="dist/sheetslider.min.js"&gt;&lt;/script&gt;</pre>
<pre class="code">&lt;link href="//cdn.jsdelivr.net/gh/zkreations/SheetSlider@2.2.0/dist/sheetslider.min.js" rel="stylesheet"/&gt;</pre>

<p>Ahora agrega la clase <strong>sh__auto</strong> al contenedor principal de la siguiente manera:</p>

Expand Down
26 changes: 24 additions & 2 deletions source/sheetslider.css
View file
Original file line number Diff line number Diff line change
@@ -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
*/
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
28 changes: 17 additions & 11 deletions source/sheetslider.js
View file
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down Expand Up @@ -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();
});

})();

0 comments on commit e8b5637

Please sign in to comment.