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
|
1 2 |
<script type="text/javascript" src="js/jquery-1.js"></script> <script type="text/javascript" src="js/jqFancyTransitions.js"></script> |
Code HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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="<i>Texte 1 <a href="">Votre Texte</a></i>"> <img style="display: none;" src="img/img1.jpg" alt="<i>Texte 2 <a href="">Votre Texte</a></i>"> <img style="display: none;" src="img/img1.jpg" alt="<i>Texte 3 <a href="">Votre Texte</a></i>"> <img style="display: none;" src="img/img1.jpg" alt="<i>Texte 4 <a href="">Votre Texte</a></i>"> </div> <script> $('#FancyTransitions').jqFancyTransitions({ position: 'curtain' }); </script> </div> </div> |
Code css :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@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