Créer un carrousel avec Mootools
Posté le Wednesday 11 April 2012 | Catégories : (x)HTML, Javascript, Mootools, CSS
Il existe de nombreuses extensions Javascript permettant de créer un carrousel d'images. La plupart sont cependant trop lourds, et trop difficiles à adapter. Une excellente approche a été proposée par Pablo Leaño Martinet sur son site web. Le code de base est simple et léger, et peut être étendu grâce à des plugins. La gestion de l'affichage des slides est laissée aux bons soins du développeur, grâce à du classique CSS.
Le code Javascript se trouve dans le fichier carousel.js. Il suffit ensuite de créer le carrousel en HTML:
<div id="carousel">
<div id="slides-wrapper">
<div class="slide">
<img src="img1.jpg" />
<h2>Slide 1</h2>
</div>
<div class="slide">
<img src="img2.jpg" />
<h2>Slide 2</h2>
</div>
<div class="slide">
<img src="img3.jpg" />
<h2>Slide 3</h2>
</div>
<div class="slide">
<img src="img4.jpg" />
<h2>Slide 4</h2>
</div>
</div>
</div>
Comme on peut le constater, le code comporte 2 blocs principaux: div#carousel qui contient le carrousel complet, et div#slides-wrapper qui contient les différents slides. Il ne reste plus qu'à créer le carrousel:
<script type="text/javascript" src="mootools-core-1.3.2-full-compat-yc.js"></script>
<script type="text/javascript" src="carousel.js"></script>
<script type="text/javascript">
var carousel;
window.addEvent('domready', function(){
carousel = new Carousel({
auto_slide: true,
maskId: "carousel",
wrapperId: "slides-wrapper"
});
});
</script>
Pour garder le code simple, l'apparence des slides n'est pas définie par défaut, c'est donc au développeur de créer le code CSS nécessaire, au demeurant fort simple:
#carousel{
width: 450px;
height: 300px;
}
.slide img {
width: 100%;
height: 100%;
}
.slide h2 {
position: absolute;
top: 0;
left: 20px;
}
Le carrousel peut également être contrôlé manuellement, ce qui permet par exemple de le mettre en pause lorsque la souris passe au-dessus de celui-ci:
$('carousel').addEvent('mouseover', function(){
carousel.stop();
});
$('carousel').addEvent('mouseout', function(){
carousel.play();
});
Plugins
Le carrousel peut également être étendu ou modifié grâce à un système de plugins. Un plugin doit simplement étendre la classe CarouselObserver. Un exemple est fourni, qui permet d'ajouter un bouton pour chaque slide (les boutons blancs en haut à droite sur le screenshot ci-dessous).
Pour l'utiliser il faut d'abord définir manuellement les boutons en HTML:
<div id="carousel">
<ul id="tabs">
<li><a href="#" onclick="carousel.manualMoveTo(0); return false;"></a></li>
<li><a href="#" onclick="carousel.manualMoveTo(1); return false;"></a></li>
<li><a href="#" onclick="carousel.manualMoveTo(2); return false;"></a></li>
<li><a href="#" onclick="carousel.manualMoveTo(3); return false;"></a></li>
</ul>
...
</div>
Configurer ensuite le plugin et le carrousel:
var tabs = new CarouselTabs(carousel,{tabsSelector:"#tabs li"});
carousel = new Carousel({
auto_slide: true,
maskId: "carousel",
wrapperId: "slides-wrapper",
plugins:[ tabs ]
});
Et finalement définir l'affichage des boutons, en CSS:
#tabs {
display: block;
position: absolute;
top: 0px;
right: 10px;
z-index: 100;
}
#tabs li {
display: block;
width: 12px;
height: 12px;
float: left;
margin-left: 8px;
border-radius: 6px;
background: white;
background: rgba(255, 255, 255, 0.3);
}
#tabs li.current {
background: rgba(255, 255, 255, 0.8);
}
#tabs li a {
display: block;
width: 100%;
height: 100%;
}
