Slideshow en CSS3 et jQuery

Voici un slideshow en javascript (jQuery) avec des transitions en CSS3. La transition se fait sur la taille et sur l'opacité.

1

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

2

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

3

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

4

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

5

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

Previous
Next

Téléchargement

le fichier css

le fichier javascript

le code HTML

<div class="slideshow"> <div class="item"> <img src="slideshow/1.jpg" alt="1"/> <div class="summary"> <h2>Transition avec CSS3</h2> <p>changement de classe avec javascript et transition avec CSS3</p> </div> </div> <div class="item"> <img src="slideshow/2.jpg" alt="2"/> <div class="summary"> <h2>Transition avec CSS3</h2> <p>changement de classe avec javascript et transition avec CSS3</p> </div> </div> <div class="item"> <img src="slideshow/3.jpg" alt="3"/> <div class="summary"> <h2>Transition avec CSS3</h2> <p>changement de classe avec javascript et transition avec CSS3</p> </div> </div> <div class="item"> <img src="slideshow/4.jpg" alt="4"/> <div class="summary"> <h2>Transition avec CSS3</h2> <p>changement de classe avec javascript et transition avec CSS3</p> </div> </div> <div class="item active"> <img src="slideshow/5.jpg" alt="5" /> <div class="summary"> <h2>Transition avec CSS3</h2> <p>changement de classe avec javascript et transition avec CSS3</p> </div> </div> <div class="left" onclick="previous()"><span>Previous</span></div> <div class="right" onclick="next()"><span>Next</span></div> </div>
retourner en haut de la page