Introduction

Phénomène connu des développeurs, qui survient lorsqu'on utilise la pseudo-classe :target afin de cibler un unique élément ayant un identifiant (id) dans une page, j'ai nommé le saut de page.

Très utile pour créer un sommaire dans un article par exemple, cette pseudo-classe l'est également pour mettre en place des lightbox ou encore des slider.

Le problème du saut brutal

Cependant, dans le cas d'un slider, un fâcheux problème apparaît. A chaque fois que nous allons cliquer sur un lien pour faire apparaître une image, nous allons constater un saut de page brutal, ce qui s'avère assez désagréable pour l'expérience utilisateur.

Voyons un exemple avec un diaporama qui utilise des identifiants pour la navigation.

• 1
• 2
• 3
• 4

Vous pouvez constater un saut de page brutal. Maintenant, nous allons appliquer une petite astuce pour éviter ce problème dans un autre slider.

La solution

Très facile à mettre en place, il vous suffit de créer des id pour chaque lien et de placer ceux-ci juste au-dessus de votre slider. La balise <b> étant sans valeur sémantique, elle fera parfaitement l'affaire. Mais rien ne vous empêche de mettre un élément div ou span.

• 
• 
• 
• 

description1

description2

description3

description4

Vous constatez que la page ne saute pas pour revenir un peu plus haut.

<b id="votre_id1" class="votre_class"></b>
<b id="votre_id2" class="votre_class"></b>
<b id="votre_id3" class="votre_class"></b>
<b id="votre_id4" class="votre_class"></b>


<div class="diapo-index">
<ul>
<li><a href="#votre_id1"><img src="image1.jpg" alt></a></li>
<li><a href="#votre_id2"><img src="image2.jpg" alt></a></li>
<li><a href="#votre_id3"><img src="image3.jpg" alt></a></li>
<li><a href="#votre_id4"><img src="image4.jpg" alt></a></li>
</ul>
<div class="diapo-index-images">
<div class=description>
<span>description1</span>
<img src="image1.jpg" alt>
</div>
<div class=description>
<span>description2</span>
<img src="image2.jpg" alt>
</div>
<div class=description>
<span>description3</span>
<img src="image3.jpg" alt>
</div>
<div class=description>
<span>description4</span>
<img src="image4.jpg" alt>
</div>
</div>
</div>

.votre_class {display:none} /*la solution miracle*/


/*code du slider*/
.diapo-index{
	
max-width: 600px;
margin: auto;
overflow-x: hidden
	
	}

.diapo-index-images{
display: flex;
position: relative;
width: 400%;
transition: transform .6s ease-in-out
	
	}


#votre_id1:target ~ .diapo-index .diapo-index-images{
	
	transform:translatex(0)
		
	}
	

	
#votre_id2:target ~ .diapo-index .diapo-index-images{
	
	transform:translatex(-25%)
	
	}

#votre_id3:target ~ .diapo-index .diapo-index-images{
	
	transform:translatex(-50%)
	
	}

	
#votre_id4:target ~ .diapo-index .diapo-index-images{
	
	transform:translatex(-75%)
	
	}


.description{
	
position:relative;

	}
	
.description span{
	
position:absolute;
top: 0;
left: 0;
right: 0;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: hsla(0,0%,0%,.6)
	
	}
	
	
.diapo-index ul{

list-style:none;
display: flex;
justify-content: space-around;

	}

.diapo-index ul li {

padding: .25rem;
display: inline-flex
	
	}

.diapo-index ul li img{
	box-shadow: 0 1px 4px hsla(0,0%,0%,.4);
border: 3px solid white;
display: block
		
	}
	

La solution réside dans la classe. On peut bien entendu changer le nom de cette classe. Il suffira ensuite de placer dans le CSS la propriété display associée à la valeur none correspondant à la classe.

Exit le saut de page !

Une autre solution très efficace en CSS consite à utiliser des input de type checkbox ou radio. Rendez-vous sur le tutoriel : Réaliser une galerie d'images avec CSS

Source, inspiration, ressources :

Voir d'autres diaporamas sur ce blog.

Voir aussi en complément sur ce blog la propriété css scroll-behavior (celle-ci permet le saut de page avec un effet moins brutal)