Pour faire un slider du type http://www.immobilier-ocean.com/ avec Jquery et Cycle :
Charger Jquery, puis Cycle (http://jquery.malsup.com/cycle)
Appeler la fonction Cycle dans un autre fichier.js :
[cc lang= »javascript »]var i=0;
$(‘#accroche’).cycle({
speed: 500,
timeout: 6000,
fx: ‘scrollRight’,
before: onBefore
});
function onBefore() {
if(i!=0){
$(‘#accroche h2’).clearQueue().animate({‘left’:-320},{duration:300}).animate({‘left’:0},{duration:400});
$(‘#accroche h3’).clearQueue().animate({‘left’:-240},{duration:300}).animate({‘left’:0},{duration:400});
}
i++;
}[/cc]
La fonction Cycle va afficher chaque élément contenu dans #accroche les uns après les autres :
Paramètres fx : Type d’animation (Liste des animations possibles ici : http://jquery.malsup.com/cycle/browser.html)
Paramètre speed : durée de l’animation
Paramètre timeout : durée entre deux slides
Paramètre before : fonction appelée avant le cycle
Grâce à ce dernier paramètre, il est facile d’animer des éléments contenus dans le slide, tout en conservant la cadence générale.
L’incrément sert à éviter l’animation des titres lors de l’arrivée sur la page.
