Aller au contenu principal

Slider responsive CSS Scroll Snap

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 -->

  1. 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 valeur hidden.

    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 valeur x mandatory.

  2. 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és height et width en CSS dans l'élément img, respectivement à auto et 100% ainsi que la propriété raccourcie flex à 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 valeur 3/2 à l'élément img. De plus, la propriété d'image object-fit et la valeur cover va permettre de conserver ce rapport.

  3. 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.

  4. 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ément img.

  5. 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;
}