



La construction du slider en HTML :
<div class="galerie"><!-- Notre conteneur global -->
<img id="slide1" src="image1.jpg" alt><!-- chaque img possede un identifiant different correspondant aux liens de la navigation -->
<img id="slide2" src="image2.jpg" alt>
<img id="slide3" src="image3.jpg" alt>
<img id="slide4" src="image4.jpg" alt>
</div><!-- fin conteneur global -->
<ul class="ancre"><!-- La navigation -->
<li><a href="#slide1">1</a></li><!-- chaque lien possede un identifiant different correspondant aux id des img -->
<li><a href="#slide2">2</a></li>
<li><a href="#slide3">3</a></li>
<li><a href="#slide4">4</a></li>
</ul><!-- fin navigation -->
-
Création du conteneur principal
On crée un élément
div
qui englobe le slider. La longueur du slider sera à définir selon vos besoins (dans notre exemple, il s'agit de 600 pixels). Nous allons également déclarer la propriétéoverflow
avec la valeurhidden
.Nous pourrions laisser l'axe horizontal visible, laissant ainsi apparaître une barre de défilement de manière à pouvoir naviguer avec la souris. Mais comme nous allons mettre en place une navigation, nous pouvons faire disparaître la barre de défilement. Sachez que sur smarphone, la barre disparaît d'elle-même.
Nous allons par ailleurs utiliser le modèle de rendu flexbox qui sert de base au module CSS Scroll Snap. Nous déclarons ensuite la propriété
scroll-snap-type
et la valeurx mandatory
. -
Les images du slider
Nous venons de mettre en place notre module qui va permettre de faire défiler les photos. Désormais, occupons-nous des images.
Nous ajoutons une hauteur et une largeur sur l'élément
img
dans le code HTML. Il suffit ensuite de déclarer les propriétésheight
etwidth
en CSS dans l'élémentimg
, respectivement àauto
et100%
ainsi que la propriété raccourcieflex
à0 0 100%
.Si vous souhaitez ajouter des images qui ont de tailles différentes et/ou au format portrait, il faudra procéder à quelques ajustements. Dans cet exemple, le ratio des images est de 3/2 (600 x 400). La propriété
aspect-ratio
va nous aider à respecter le rapport d'aspect. Il faudra ajouter la valeur3/2
à l'élémentimg
. De plus, la propriété d'imageobject-fit
et la valeurcover
va permettre de conserver ce rapport. -
Aligner les images
Nous allons appliquer sur nos images la propriété
scroll-snap-align
en passant la valeur àcenter
. Ainsi, nos photos se trouvent-elles au centre du cadre. Cette propriété est surtout utile lorsque la barre de défilement est apparente mais dans ce cas-ci, elle va servir pour indiquer au navigateur de placer l'image au centre si on basule la fenêtre du navigateur du bureau au mobile et vice-versa. -
Mise en place de la navigtion
Ensuite, on met en place la navigation. Dans cet exemple, il s'agit d'une liste non ordonnée avec l'élément
ul
. Nous allons insérer des liens hypertexte à l'intérieur de notre liste. Chaque lien aura un identifiant propre que l'on reporte dans chaque élémentimg
. -
Défilement lisse
Pour finir, nous allons ajouter la propriété
scroll-behavior
, ce qui va donner une transition lisse lors du défilement des photos.
*,
*::before,
*::after {
box-sizing: border-box;
}
.galerie {
max-width: 600px;
margin: 2rem auto;
display: flex;
overflow: hidden;
border-radius: 5px;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.galerie img {
flex:0 0 100%;
width:100%;
display:block;
scroll-snap-align: center;
height:auto;
/*aspect-ratio:3/2;
object-fit: cover;*/
background-color:#cccccc;
}
.ancre {
list-style-type: none;
padding-left:0;
margin:0;
display:flex;
justify-content: center;
}
.ancre li a{
display: flex;
justify-content: center;
align-items:center;
width: 30px;
height: 30px;
background: #404040;
border-radius: 50%;
text-decoration: none;
color: white;
margin: 0 10px 0 10px;}
.ancre li a:hover,
.ancre li a:focus-within {
background: #838181;
}