Tutoriel : Ajouter un Slider FancyTransitions à votre Site Web
Commencer par télécharger jQuery et jqFancyTransitions et de les inclure entre les balises <head> et </head> comme indiqué ci-dessous:
Code HTML

Code HTML
<div id="container"> <div style=" width: 500px; height: 332px; position: relative; background-position: left top;" id="FancyTransitions"> <img style="display: none;" src="img/img1.jpg" alt="Texte 1 Votre Texte"> <img style="display: none;" src="img/img1.jpg" alt="Texte 2 Votre Texte"> <img style="display: none;" src="img/img1.jpg" alt="Texte 3 Votre Texte"> <img style="display: none;" src="img/img1.jpg" alt="Texte 4 Votre Texte"> </div> </div> </div>
Code css :
@CHARSET "UTF-8"; a { color: #5C7F99; text-decoration: none; } a:hover { text-decoration: none; } #container .FancyTransitionsMenu a { -moz-border-radius: 5px; font-style: italic; font-size: 16px; background-color: #9b9b9b; color: white; padding: 5px 10px; width: 200px; margin: 5px; display: block; } #container #FancyTransitionsMenuSimple, #container code, #container .FancyTransitionsMenuMenu, #container #FancyTransitionsMenuMulti { float: left; } #container .FancyTransitionsMenuMenu { width: 150px; } #container .FancyTransitionsMenuMenu { padding-top: 20px; } #container .FancyTransitionsMenuMenu a { display: block; font-size: 14px; width: 115px; } #example { float: left; } .ft-title { padding: 10px 10px; width: 480px; text-align: left; } .ft-prev, .ft-next { background-color: #000; padding: 0 10px; } .ft-button-ft-active { color: black; } }
David LAURENT
Aucun commentaire »