Compatibilité:

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é.

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

Transition avec CSS3

changement de classe avec javascript et transition avec CSS3

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>