Cette page presente des exemples d'utilisation du plugin jquery Cycle

L'article expliquant la méthode est ici : http://lesnouvellesdelatelier.blogspot.com/2011/01/jquery-cycle-le-slider-tout-faire.html

Demo Basique

 
$(document).ready(function() {
 $('#diaporama_simple').cycle({
 fx: 'fade' 
 });
 });

demo avec navigation

 
$(document).ready(function() {
 $('#diaporama_simple2').cycle({
		fx: 'scrollDown',
		speed:  'slow', 
    	timeout: 0, 
		pager:  '#nav3',
		next:   '#next2', 
    	prev:   '#prev2' 
	});
 });

 

demo avec des textes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien.

Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

 
$(document).ready(function() {
 $('#diaporama_simple3').cycle({
		fx: 'turnLeft',
		speed:  'fast', 
    	timeout: 0, 
		next:   '#next3', 
    	prev:   '#prev3' 
	});
 });