Slide Design

 

 

 

Installation

1. Aller depuis manager sur Configuration -> Apparence -> Onglet "Personnalisé"

Dans le bas de la page déployer en cliquant dessus le menu "Modifier/Ajouter du code CSS au thème (utilisateurs avertis)"

dans la rectangle qui s'ouvre copier coller la ligne suivante :

body #slider{ width: 547px; height: 307px; list-style: none; } 

width: 547px; étant la largeur des photos

height: 307px; étant hauteur des photos

et sauvegarder


2. Editer la page où vous souhaitez avoir le slide

Cliquer sur le bouton Editeur HTML et copier ce code :

<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider.css" />
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/theme-metallic.css" />
<script type="text/javascript" src="http://proloser.github.com/AnythingSlider/js/jquery.min.js"></script>
<script type="text/javascript" src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>

<script type="text/javascript">// <![CDATA[
// DOM Ready
$(function(){
$('#slider').anythingSlider({
theme: 'metallic',
autoPlay: true,
easing: "linear",
toggleControls: true,
});

});
// ]]></script>

<ul id="slider">
<li><img src="LIEN1.jpg" ></li>
<li><img src="LIEN2.jpg" ></li>
<li><img src="LIEN3.jpg" ></li>
<li><img src="LIEN4.jpg" ></li>
.....

</ul>

Remplacer évidement les liens (LIEN1.jpg) par le lien de l'image http://votre image.jpg

Sauvegarder...

Aucune note. Soyez le premier à attribuer une note !