Dans cet article, nous allons construire un Slider plein écran en utilisant HTML, CSS et JavaScript.
Vous pouvez le voir en direct ici
Sorry for the interrupt!
If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)
It's an affiliate link, so by purchasing, you support the blog at the same time.HTML
Comme vous pouvez le voir, nous commençons par tout emballer dans la balise main.
<main>
<div class="slider">
<div class="slider--content">
<button class="slider__btn-left">
<i class="fas fa-angle-left"></i>
</button>
<div class="slider--feature">
<h1 class="slider--title">Tasty</h1>
<p class="slider--text"></p>
<button class="slider--btn">Get started</button>
</div>
<button class="slider__btn-right">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</main>Ensuite, on maintient les éléments du Slider dans la classe .slider. Nous aurons également besoin de deux boutons pour pouvoir passer à la diapositive suivante ou précédente. Le .slider - feature contiendra le titre et la description des éléments de la diapositive.
A noter que j'utilise Font Awesome pour les icônes, vous devrez donc créer un compte ici
puis ajoutez le lien dans la balise head.
CSS
Comme d'habitude, nous démarrons le CSS en effectuant quelques réinitialisations.
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
font-family: "Open Sans", sans-serif;
background: #444;
}Ensuite, on change l'arrière-plan, la famille de polices et on importe la police Open Sans à partir des polices google.
.slider {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
.slider--content {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.slider--feature {
text-align: center;
}
.slider--title {
font-size: 2.5rem;
color: #fff;
text-transform: uppercase;
font-weight: 700;
}
.slider--text {
font-size: 1rem;
color: #fff;
text-transform: uppercase;
margin: 0.5rem 0;
}Ensuite, nous utilisons la classe .slider pour créer l'élément de diapositive en utilisant toute la largeur et la hauteur de la fenêtre et le préparer pour recevoir l'image plus tard comme arrière-plan à l'aide de javaScript.
Ensuite, on définit display: flex et justify-content: space-between sur la classe .slider-content pour distribuer équitablement les éléments suivant l'espace disponible.
.slider__btn-right,
.slider__btn-left {
background: transparent;
border: none;
outline: none;
font-size: 4rem;
color: #eee;
padding: 0 1rem;
cursor: pointer;
transition: transform 0.1s ease-in-out;
}
.slider--btn {
background: #fff;
text-transform: uppercase;
border: none;
color: #444;
border: 1px solid #444;
outline: none;
font-weight: 700;
padding: 0.8rem 2rem;
cursor: pointer;
}
.slider__btn-left:hover,
.slider__btn-right:hover {
transform: scale(0.95);
}Comme vous pouvez le voir, ce bloc de code est utilisé pour styliser les boutons. Les classes .slider__btn-right et.slider__btn-left nous aident à styliser les boutons gauche et droit de la diapositive. Nous utilisons également transition: transform 0.1s easy-in-out pour faire un petit effet d'échelle en survol avec transform: scale (0.95). Et la classe .slider - btn est appliquée au bouton d'appel à l'action pour avoir un style agréable.
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
animation: fadeIn 1s;
}Ici, nous utilisons @keyframes pour appliquer un fondu d'animation à l'élément de diapositive. Et la classe .fadeIn sera ajoutée dynamiquement à la diapositive lorsqu'un changement se produit.
JavaScript
Comme d'habitude, nous commençons la partie JavaScript en sélectionnant les éléments nécessaires.
const slideContainer = document.querySelector(".slider")
const sliderText = document.querySelector(".slider--text")
const btnLeft = document.querySelector(".slider__btn-left")
const btnRight = document.querySelector(".slider__btn-right")
const sliderImages = [
{
src: "https://drive.google.com/uc?id=1BzhhKeOc9XyZMPXnZAi_JiOYdZrwLYu-",
text: "Taste the magic",
},
{
src: "https://drive.google.com/uc?id=1M1TR1HjJCj-TuOa54jzty8QK9QUdNfSC",
text: "Taste the incredible",
},
{
src: "https://drive.google.com/uc?id=1twyebwsDDBtPiyFHxTIf9P26sDGiq5Qi",
text: "Taste the dream",
},
]
let slideCounter = 0Ensuite, nous créons un tableau d'images qui sera utilisé comme image de fond pour la diapositive. Et aussi, on déclare la variable slideCounter pour pouvoir compter le nombre de diapositives.
const startSlider = () => {
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
), url(${sliderImages[0].src})`
sliderText.innerHTML = sliderImages[0].text
}La fonction startSlider() mettra la première image du tableau sliderImages en arrière-plan de la diapositive. Je stylise également l'arrière-plan avec linear-gradient() pour assombrir un peu l'image, et enfin ajouter le texte adéquat à l'élément de la diapositive.
btnRight.addEventListener("click", function() {
if (slideCounter === sliderImages.length - 1) {
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
), url(${sliderImages[0].src})`
sliderText.innerHTML = sliderImages[0].text
slideCounter = -1
slideContainer.classList.add("fadeIn")
setTimeout(() => {
slideContainer.classList.remove("fadeIn")
}, 1000)
}
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
),url(${sliderImages[slideCounter + 1].src})`
sliderText.innerHTML = sliderImages[slideCounter + 1].text
slideCounter++
slideContainer.classList.add("fadeIn")
setTimeout(() => {
slideContainer.classList.remove("fadeIn")
}, 1000)
})Ici, nous écoutons un événement de clic sur le bouton droit de la diapositive. Ensuite, nous vérifions si le compteur (slideCounter) est égal à la dernière diapositive. Si c'est le cas, on redémarre la diapositive avec la première image et le premier texte du tableau. Ensuite, on ajoute la classe fadeIn pour animer la diapositive à l'entrée.
Ensuite, si le compteur (slideCounter) n'est pas égal à la dernière diapositive, nous pouvons définir la diapositive suivante avec les données appropriées et on incrémente la variable slideCounter et enfin on supprime l'animation après 1 seconde pour pouvoir l'animer à nouveau.
btnLeft.addEventListener("click", function() {
if (slideCounter === 0) {
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
),url(${sliderImages[sliderImages.length - 1].src})`
sliderText.innerHTML = sliderImages[sliderImages.length - 1].text
slideCounter = sliderImages.length
slideContainer.classList.add("fadeIn")
setTimeout(() => {
slideContainer.classList.remove("fadeIn")
}, 1000)
}
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
),url(${sliderImages[slideCounter - 1].src})`
sliderText.innerHTML = sliderImages[slideCounter - 1].text
slideCounter--
slideContainer.classList.add("fadeIn")
setTimeout(() => {
slideContainer.classList.remove("fadeIn")
}, 1000)
})
startSlider()Comme vous pouvez le voir ici, nous utilisons le même processus pour changer la diapositive avec le bouton gauche sauf le fait que nous vérifions si le compteur est égal à zéro. Et si c'est le cas, on passe à la dernière diapositive. Sinon, on passe à la diapositive précédente et on décrémente la variable compteur.
Et enfin, on démarre le curseur avec la fonction startSlider ().
Vous pouvez le voir en direct ici
