Plugin Cycle - Pagination et boutons précédent / suivant

in

Plugin Cycle - Comment paramétrer des boutons précédent/suivant ?

Le plugin cycle vous offre la possibilité de contrôler le défilement des slides en définissant des boutons précédent / suivant. Il suffit pour cela d'utiliser les paramètres next et prev pour définir les sélecteurs CSS qui correspondent à vos boutons. Voici quelques exemples :

Cycle - Boutons Précédent / Suivant

Pas de défilement auto (timeout=0)

$('#cycle-1').cycle({ 
    fx: 'scrollHorz',
    timeout: 0,
    next: '#next',
    prev: '#prev'
});

Cycle - Plusieurs Boutons Préc./Suiv.


$('#cycle-2').cycle({ 
    fx: 'toss',
    timeout:3000,
    next: '.next',
    prev: '.prev'
});

Cycle - Clic pour suivant


$('#cycle-3').cycle({ 
    fx: 'growY',
    timeout: 0,
    next: '#cycle-3',
});

Exécuter un traitement (callback) lors du clic sur un bouton préc./suiv

Le plugin cyle vous offre également la possibilité d'exécuter un traitement personnalisé lors du clic sur un bouton préc./suiv. Ce traitement sera exécuté juste avant le lancement de l'animation. Pour cela, il suffit d'utiliser la paramètre prevNextClick pour définir la fonction qui contient votre traitement.

Cycle - Boutons Préc./Suiv et callback

Dans exemple, nous avons utilisé le paramètre prevNextClick pour redéfinir dynamiquement les effets de transitions de notre cycle en fonction du numéro de slide (s'il est pair ou impair) et en fonction du bouton d'activation du slide (précédent ou suivant).

Code JavaScript


$('#cycle-4').cycle({ 
    timeout: 0,
    next: '#nextCall',
    prev: '#prevCall',
    prevNextClick: traitement
});

function traitement(isNext, zeroBasedSlideIndex, slideElement){
// l'objet this représente ici les options de votre cycle
// par exemple, il est donc possible de changer dynamiquement l'effet de votre cycle
   if(zeroBasedSlideIndex%2){
	this.fx=[isNext ? 'turnLeft' : 'turnDown'];
   } else {
	this.fx=[isNext ? 'turnUp' : 'turnRight'];
   }
}

Plugin Cycle - Comment ajouter des boutons de pagination ?

Pour ajouter des boutons de paginations, il suffit de définir au niveau du paramètre pager le sélecteur CSS de l'élément qui va contenir vos liens de paginations.

Pagination par défaut

Cycle - Pagination

Pas de défilement auto (timeout=0)
 

$('#cycle-5').cycle({ 
    fx: 'uncover',
    timeout: 0,
    pager: '#nav'
});

Code HTML

<div id="cycle-5" class="cycle">
 <img src="images/photo_iles_01.jpg" />
 <img src="images/photo_iles_02.jpg" />
 <img src="images/photo_iles_03.jpg" />
 <img src="images/photo_iles_04.jpg" />
</div>
<div id="nav"></div>

Créer votre propre pagination

Le plugin cycle vous offre la possibilité de construire vos propres éléments de pagination grâce au paramètre pagerAnchorBuilder.

Cycle - Pagination créée dynamiquement

La fonction définie par pagerAnchorBuilder sera exécutée pour chaque slide. Dans notre exemple, nous créons pour chaque slide, un lien avec la même image mais de taille plus petite.

Cycle - Pagination personnalisée

Dans cet exemple, nous ne créons pas d'éléments pour la pagination mais utilisons des éléments existants. Pour chaque slide, nous utilisons la fonction pagerAnchorBuilder pour définir le sélecteur CSS de l'élément qui va servir à afficher le slide. De plus, nous avons également utiliser le paramètre pagerEvent pour modifier l'évènement qui va déclencher le changement de slide. Désormais nous n'aurons plus besoin de cliquer mais simplement de survoler avec le souris. Pour finir, nous avons également positionné le paramètre pauseOnPagerHover à 1 pour stopper le défilement du cycle lorsque la souris se trouve sur un lien de pagination.

Cycle - Pagination personnalisée bis

Voyage dans les îles

Voyage dans les îles

Notre expédition a commencé au départ de la plage de l'hôtel. Ensuite nous avons pris le bateau et longer la côte pour rejoindre l'aéroport. La nature était sublime. Arrivés à l'aéroport, nous avons pris l'avion pour rentrer. Depuis l'avion, la vue était vraiment magnifique.