jQuery
【jQuery】スライダー/スライドショープラグインSliker
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"> ...