March 28, 2018

Slikerはスライダー/スライドショーjQueryプラグイン。

sliker.jsをダウンロードし、/body前にインクルードします。

html構造を作成

<div id="slider_example" class="sliker" data-arrow="fa fa-caret" data-bullet="fa fa-star">
	<div class="conteneur_strict">
		<ul class="grand_slider">
			<li><img src="./example.jpg"></li>
			<li><img src="./example.jpg"></li>
			<li><img src="./example.jpg"></li>
		</ul>
	</div>
</div>

javascript

$('#slider_example').sliker({
'nbr_li': 1, //nombre d'éléments qui défilent à chaque mouvement.
'vitesse_auto': 3000, //temps entre deux mouvements automatiques.
'vitesse': 0.5, //rapidité du mouvement (automatique ou manuel, même paramètre).
'auto': 0, //activer (1) en utilisant vitesse_auto, désactiver (0) ou personnaliser ("custom"). Voir la rubrique Timer.
'type': "none", //définit le role du slider dans le cas d'une liaison. Options: visualiseur, menu, none.
'cible': "none", //spécifie l'id du slider compagnon dans le cas d'une liaison (ex: #slider_deux).
'isolement': 0, //si actif, le slider est isolé par un fond noir transparent lors de son utilisation.
'pc_only': 0, //si actif, le slider sera éffacé sur tous les dispositifs mobiles.
'loop': 0, //si actif, le slider répetera son contenu indéfiniment, créant un rail infini.
'liquide': 1, //si actif, l'élément prendra, de façon élastique, toute la zone du slider.
'drag': 0, //permet la manipulation du slider aux doigts ou en cliquer/glisser à la souris.
'creer_afficheur': 0, //crée automatiquement une zone avec l'image zoomée au dessus du slider.
'fading_mode': 0, //remplace la transition en "déplacement de rail" par un fondu.
'fading_type': 1, //mode 1: fondu blanc. mode 2: fondu enchainé entre deux images.
'buffering_nbr': 1, //nombre d'image préchargé autour de l'image active. Nécessite l'utilisation de data-src au lieu de src.
'fullscreen': 0, //affiche ou masque le bouton fullscreen.
'bullets': 1, //affiche ou masque les puces du slider.
'bullets_limit': 20, //limite de puces au délà de laquelle celles ci se transforme en un menu pages (ex: 7/22).
'bullets_limit_mobile': 8, //identique à bullets_limit mais ne s'applique qu'en cas de mobile
'arrows': 1, //affiche ou masque les flèches du slider.
});

Couleurs
Exemple

#slider_example{
.sliker_colors(red,white);
}

Icones
Exemple

<div id="slider_example" class="sliker" data-arrow="fa fa-caret" >
	<div class="conteneur_strict">
		...

Exemple

<div id="slider_example" class="sliker" data-bullet="fa fa-star" >
	<div class="conteneur_strict">
		...

Timer
Exemple

<div id="slider_example" class="sliker" data-arrow="fa fa-caret-left" >
	<div class="conteneur_strict">
		<ul class="grand_slider">
			<li data-timer="3000">
				...

Demo/Download