Comment Créer une Glissière d'Image ou un Diaporama
Glissière d'image (ou Image Carousel) est un bon moyen d'afficher des images multiples de site web. Des belles images peuvent rend le site web attrayant pour plusieurs visiteurs.
En général, les glissières d'image sont créées à l'aide de JavaScript, mais avec CSS3, cela peut également être fait en utilisant uniquement CSS3. Dans cet article, nous allons apprendre comment l'effet de diaporama peut être obtenu en gardant le code minimum CSS, et dans la deuxième partie de cet article, nous allons montrer des moyens de créer des glissères d'image avec JavaScript. Donc, passons à cette discussion ci-dessous:
Création des glissières d'Image en Utilisant Uniquement CSS3
Vous avez probablement vu des glissières très lourdes sur la base de JavaScript. Telles glissières rendent la page web très lente et elles aussi échouent si l'utilisateur a désactivée l'interprétation de JavaScript sur le navigateur. La seule solution de ce problème est ce qu'on ne doit pas utiliser ces glissières, mais comment implémenter une glissière sans JavaScript? La réponse de cette question se trouve ici. Trouvez un bon modèle de travail de glissière qui a été crééé sans JavaScript.
Voyons comment le faire pas à pas:
- Sélectionnez une width et height statique pour toutes les diapos.
- Mettez toutes vos diapos l'une à côté de l'autre dans une seule image.
- Placez l'image en tant que background du <div>. Utilisez la propriété background-position pour définir la position initiale comme 0px. Vous vous assurez de mesurer la position pour chaque diapo, elles doivent être les nombres négatifs.
- Définissez la longueur du temps dans l'animation pour tout le diaporama à faire fonctionner. Utilisez la propriété animation-duration pour ce but .
- Pour @keyframes, vous devez faire un peu de maths. Il est (pics * 2) / 100. Utilisez cela comme pour multiplier chaque diapo, avec "100%" comme la dernière keyframe. Chaque image demande des multiples keyframes pour "pauser" le diaporama sur l'image.
Maintenant voyons à quoi cela ressemblera:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Glissière de l'image</title>
<style>
body {
margin: 10px auto;
text-align: center;
}
.content {
max-width: 800px;
text-align: left;
margin: auto;
}
.simple-ss {
width: 800px;
height: 250px;
background-color: #eeeeee;
margin: auto;
background-image: url("https://imgur.com/download/OtK7XDW");
animation-name: slide;
animation-duration: 10s;
animation-direction: normal;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes diapo {
0% {
background-position: 0 0;
}
16.66% {
background-position: 0 0;
}
33.32% {
background-position: -800px 0;
}
49.98% {
background-position: -800px 0;
}
66.64% {
background-position: -1600px 0;
}
83.30% {
background-position: -1600px 0;
}
100% {
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="simple-ss"></div>
<div class="content">
<p>Ceci est une preuve de concept pour un diaporama qui n'utilise pas de Javascript. Il n'a pas de pages ni de boutons gauche / droite, etc.</p>
</div>
</body>
</html>Voici un exemple dans lequel les images de l'arrière-plan sont définies pour agir comme des diapos:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Glissière d'image</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
}
img {
max-width: 100%;
}
.slider-container {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.menu {
position: absolute;
left: 0;
z-index: 900;
width: 100%;
bottom: 0;
}
.menu label {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50px;
margin: 0 0.2em 1em;
}
.menu label:hover,
.menu label:focus {
background: #1c87c9;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-size: cover;
background-position: 50% 50%;
transition: left 0s 0.75s;
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide-1 {
background-image: url("/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg");
}
.slide-2 {
background-image: url("/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg");
}
.slide-3 {
background-image: url("/uploads/media/default/0001/03/b87b29b6ca67b64b76651037dc16f5a46e73b42a.jpeg");
}
</style>
</head>
<body>
<div class="slider-container">
<div class="menu">
<label for="slide-dot-1"></label>
<label for="slide-dot-2"></label>
<label for="slide-dot-3"></label>
</div>
<input id="slide-dot-1" type="radio" name="slides" checked />
<div class="slide slide-1"></div>
<input id="slide-dot-2" type="radio" name="slides" />
<div class="slide slide-2"></div>
<input id="slide-dot-3" type="radio" name="slides" />
<div class="slide slide-3"></div>
</div>
</body>
</html>Créez des diapos avec des liens d'ancrage
Une glissière a généralement un peu de UI pour sauter à la diapo particulière, alors faisons-le sémantiquement, avec les liens d'ancrage sautant à la bonne diapo.
Créez vos liens d'ancrage en utilisant la balise d'ancrage <a>. Ajoutez un peu de style et obtenez quelques boutons.
Pour vous assurer que vous allez obtenir un effet de glissement sans à-coups sur le bureau et sur le mobile, ajoutez la propriété scroll-behavior avec sa valeur "smooth".
Ensuite, utilisez la pseudo-classe :target pour quelque chose spéciale à la diapo "active". Un clic sur l'une des boutons de navigation de diapos change l'URL à # hash, est cela est quand :target a son effet.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Glissière d'image</title>
<style>
* {
box-sizing: border-box;
}
.slider {
width: 300px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #666;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 300px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
color: #1c87c9;
}
.slider > a:focus {
background: #eee;
}
/* N'a pas besoin des boutons de navigation */
@supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #1c87c9, #ffcc00);
font-family: "Ropa Sans", sans-serif;
}
</style>
</head>
<body>
<div class="glissière">
<a href="#diapo-1">1</a>
<a href="#diapo-2">2</a>
<a href="#diapo-3">3</a>
<a href="#diapo-4">4</a>
<a href="#diapo-5">5</a>
<div class="diapos">
<div id="diapo-1">1</div>
<div id="diapo-2">2</div>
<div id="diapo-3">3</div>
<div id="diapo-4">4</div>
<div id="diapo-5">5</div>
</div>
</div>
</body>
</html>Créez un Diaporama avec CSS et JavaScript
La première chose vous devez faire est la création du structure de la glissière d'image en utilisant HTML et le placement des images.
Après la création du structure de la glissière d'image, l'étape suivant est utiliser des styles CSS styles pour l'interface de votre glissière. Ajoutez aussi des styles aux images, arrière-plans, etc. Vous deez aussi styler les points et rendre vos images réactives et adaptables aux navigateurs en utilisant les propriétés CSS.
Maintenant ajoutons la partie JavaScript pour fournir la fonctionnalité pour rendre les images auto-changeables après l'intervalle du temps spécifique.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Images de diaporama</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
.mySlides {
display: none;
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Boutons next & previous */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position de "next button" à la droite */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* En survol, ajoutez la couleur noire de l'arrière-plan avec un peu see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #999999;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #111111;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px;
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" style="width: 100%;" />
<div class="text">London, Ebgland</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" style="width: 100%;" />
<div class="text">Sunset in Romania</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" style="width: 100%;" />
<div class="text">New York, USA</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br />
<div style="text-align: center;">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex += n));
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
</body>
</html>Pour créer un diaporama automatique, utilisez le code ci-dessous:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Images de diaporama</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
.mySlides {
display: none;
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #999999;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #111111;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px;
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" style="width: 100%;" />
<div class="text">London, Ebgland</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" style="width: 100%;" />
<div class="text">Sunset in Romania</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" style="width: 100%;" />
<div class="text">New York, USA</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br />
<div style="text-align: center;">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>