Dans ce tutoriel je vous propose de découvrir Owl Carousel. Comme son nom l'indique ce plugin jQuery va vous permettre de réaliser de créer des sliders et des carousel très simplement et RESPONSIVE !
Installation
L'installation se fait très simplement
<!-- On importe le CSS dans le <head> -->
<link href="js/owlcarousel/owl.carousel.css" rel="stylesheet">
...
<!-- On importe le javascript à la fin de la page après jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/owlcarousel/owl.carousel.min.js"></script>On peut alors utiliser owlcarousel très simplement. Le plugin est capable de gérer des carousel qui contiennent des slides HTML donc il n'y a pas grand choses à voir au niveau du code HTML. Il suffit d'avoir un élément entourant X enfants.
$('.monCarousel').owlCarousel(); Le Responsive !
Comme je vous le disais au début, le gros intérêt de Owl Carousel est son aspect Responsive qui permet changer l'aspect du carousel suivant la taille de l'écran. Tout ceci gràce à l'option responsive.
$('.carousel').owlCarousel({
items: 3,
responsive: {
0: {
items: 1
},
768: {
items: 3,
margin: 30
},
992: {
items: 4,
margin: 30
}
}
});
