fski-slider
v1.0.4
Published
Défilement d'image
Downloads
6
Readme
fski-slider
Fonctionnalité
- Permet d'effectuer un défilement d'images et affiche le texte de l'attribut "alt" de l'image en légende
Nagivateurs testés
Chrome | Firefox| Edge | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ |
Installation
Using npm:
$ npm install fski-slider
Example
Activation en javascript
import { Slider } from "fski-slider";
Slider.bind();
Sur la page html, on doit passer l'attribut data-delay (valeur en seconde) et l'attribut data-transition une classe de transition pour le texte ( facultatif ), la valeur par défaut étant "done".
Sur les images, on peut changer la transition par défaut.
<div class="slider" data-delay="5" data-transition="done">
<img src="img/pic1.png" alt="test1" />
<img src="img/pic3.png" alt="test3" />
<img src="img/pic5.png" alt="reprise test5" data-transition="up" />
</div>
Exemple du style à appliquer pour avoir l'effet
.slider {
position: relative;
width: 300px;
display: block;
}
.slider img {
opacity: 0;
position: absolute;
top: 0; left: 0;
width: 100%;
z-index: 10;
transition: opacity 1.5s ease-out;
}
.slider img:nth-child(1) {
position: relative;
}
.slider span {
position: absolute;
z-index: 20;
}
.slider span.done {
font-size: 1.2rem;
text-shadow: 1px 1px 4px #888888;
font-weight: 600;
width: 100%;
top: 0;
text-align: center;
transform: translateY(+50px);
transition: transform 1s ease-out;
}
.slider span.up {
font-size: 1rem;
color: chartreuse;
font-weight: 600;
width: 100%;
bottom: 0;
text-align: center;
transform: translateY(-50px);
transition: transform 1s ease-out;
}