WebCssDesign

Slidorion accordéon avec slider jquery

• Accueil
• Ajax
• Slidorion accordéon avec slider jquery

• Tweet

• Tweet

Slidorion est un nouveau slider d’image jQuery (et oui encore un!) qui associé avec un accordéon permet d’afficher du contenu textuel du plus bel effet dans chaque slide.

Dans la partie HEAD:

<link rel= »stylesheet » href= »css/slidorion.css » />
<script src= »js/jquery.min.js »></script>
<script src= »js/jquery.easing.js »></script>
<script src= »js/jquery.slidorion.js »></script>

Dans la partie BODY:

<div id= »slidorion »>
<div id= »slider »>
<div rel= »section1″>
<img src= »sample.jpg » width= »500″ height= »400″ />
</div>
<div rel= »section2″>
<img src= »sample.jpg » width= »500″ height= »400″ />
</div>
<div rel= »section3″>
<img src= »sample.jpg » width= »500″ height= »400″ />
</div>
</div>
<div id= »accordion »>
<div><a rel= »section1″>Kung Fu Panda 2</a></div>
<div>
<!– CONTENT GOES HERE –>
</div>
<div><a rel= »section2″>The Dark Knight</a></div>
<div>
<!– CONTENT GOES HERE –>
</div>
<div><a rel= »section3″>Hot Fuzz</a></div>
<div>
<!– CONTENT GOES HERE –>
</div>
</div>
</div>

Basique initialisation

<script>
$(document).ready(function(){
	$('#slidorion').slidorion();
});
</script>

Initialisation avancée

<script>
$(document).ready(function(){
	$('#slidorion').slidorion({
		speed: 1000,
		interval: 4000,
		effect: 'slideLeft'
	});
});
</script>

 

Il posséde de multiples effets tels que :  fade, slideLeft, overRight, overDown, etc… pour les transitions.

De multiples options sont disponibles comme la vitesse des transitions et des intervalles, le choix de l’autoplay, etc…

Nécessite : jQuery, jQuery UI et Easing
Compatible avec la majorité des navigateurs

Site web officiel :

http://www.slidorion.com/

Télécharger :

https://github.com/hollandben/slidorian