jqFancyTransitions « Le Blog de Webinnov

S'identifier

Contact

jqFancyTransitions

administrateur

Le 19 mai 2014 à 19 h 00 min

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

  <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