Slides – est un plugin de diaporama jQuery simple, facile à personnaliser et à styliser.
Slides fournit des effets de fondu ou de transition de diapositive, un fondu d'entrée et de sortie d'image, une précompression d'image, une génération automatique de pagination, une boucle, une personnalisation de la lecture automatique et de nombreuses autres options.
Avec le plug-in Slides, vous pouvez mélanger les diapositives et définir celle avec laquelle vous souhaitez démarrer le diaporama. Il est livré avec de nombreuses instructions et exemples.
Plus de bêtises, laissez-moi juste vous poster le code
$(function(){ $("#slides").slidesjs({ play: { active: true, // [boolean] Generate the play and stop buttons. // You cannot use your own buttons. Sorry. effect: "slide", // [string] Can be either "slide" or "fade". interval: , // [number] Time spent on each slide in milliseconds. auto: false, // [boolean] Start playing the slideshow on load. swap: true, // [boolean] show/hide stop and play buttons pauseOnHover: false, // [boolean] pause a playing slideshow on hover restartDelay: // [number] restart delay on inactive slideshow } }); });
Réception :
<!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.slides.min.js"></script> <script> $(function(){ $("#slides").slidesjs({ width: , height: }); }); </script> </head> <body> <div id="slides"> <img src="http://placehold.it/x"> <img src="http://placehold.it/x"> <img src="http://placehold.it/x"> <img src="http://placehold.it/x"> <img src="http://placehold.it/x"> </div> </body>
Le contenu ci-dessus est tout le code sur jquery.slides.js, j'espère qu'il vous plaira.