HTML :
<section class="header-page-accueil hero is-fullheight"> <div class="slider-home"> <div class="slide"> <img src="img/image1.jpg" alt="Image 1"> <div class="texte-slide"> <h2 class="title is-1 has-text-centered">Titre 1</h2> <h3 class="subtitle is-3 has-text-centered">Sous-titre 1</h3> <div class="buttons has-addons is-centered"> <a href="tel:+33xxxxxxxxx" class="button telephone" title="Communication directe"> <span class="icon"> <i class="fas fa-phone" aria-hidden="true" title="téléphone"></i> <span class="sr-only">téléphone</span> </span> <span>xx xx xx xx xx</span> </a> <a href="#" class="button" title="Formulaire de contact"> <span class="icon"> <i class="fas fa-envelope" aria-hidden="true" title="contact"></i> <span class="sr-only">contact</span> </span> <span>nous contacter</span> </a> </div> </div> </div> <div class="slide"> <img src="img/image2.jpg" alt="Image 2"> <div class="texte-slide"> <h2 class="title is-1 has-text-centered">Titre 2</h2> <h3 class="subtitle is-3 has-text-centered">Sous-titre 2</h3> <div class="buttons has-addons is-centered"> <a href="tel:+33xxxxxxxxx" class="button telephone" title="Communication directe"> <span class="icon"> <i class="fas fa-phone" aria-hidden="true" title="téléphone"></i> <span class="sr-only">téléphone</span> </span> <span>xx xx xx xx xx</span> </a> <a href="#" class="button" title="En savoir plus"> <span class="icon"> <i class="fas fa-seedling" aria-hidden="true" title="titre 2"></i> <span class="sr-only">titre 2</span> </span> <span>en savoir plus</span> </a> </div> </div> </div> <div class="slide"> <img src="img/image3.jpg" alt="Image 3"> <div class="texte-slide"> <h2 class="title is-1 has-text-centered">Titre 3</h2> <h3 class="subtitle is-3 has-text-centered">Sous-titre 3</h3> <div class="buttons has-addons is-centered"> <a href="tel:+33xxxxxxxxx" class="button telephone" title="Communication directe"> <span class="icon"> <i class="fas fa-phone" aria-hidden="true" title="téléphone"></i> <span class="sr-only">téléphone</span> </span> <span>xx xx xx xx xx</span> </a> <a href="#" class="button" title="titre 3"> <span class="icon"> <i class="fas fa-shopping-basket" aria-hidden="true" title="titre 3"></i> <span class="sr-only">titre 3</span> </span> <span>titre 3</span> </a> </div> </div> </div> </div> </section>
CSS : (ajouter CSS slick carousel)
.header-page-accueil .slide{
position: relative;
}
.slider-home .slick-list{
height: 100vh;
}
.slider-home .slick-track{
height: 100%;
}
.slider-home .slick-slide img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.1);
}
.header-page-accueil .slick-active img{
animation: zoom 5s ease-in-out forwards;
}
@keyframes zoom {
from{
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.header-page-accueil .texte-slide{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgba(0,0,0,.3);
padding: 0 1rem 0 1rem;
}
.header-page-accueil h2.title, .header-page-accueil h3.subtitle{
color: var(--white);
}
.header-page-accueil .button{
font-size: 1.5rem;
}
.header-page-accueil .button.telephone{
background-color: var(--color-1);
border-color: var(--color-1);
}
.header-page-accueil .button.telephone:hover{
background-color: var(--white);
border-color: var(--white);
color: var(--color-1);
}
.header-page-accueil .slick-active h2{
animation-name: fadeInLeft;
animation-duration: 2s;
animation-fill-mode: both;
opacity: 0;
}
.header-page-accueil .slick-active h3{
animation-name: fadeInRight;
animation-duration: 2s;
animation-delay: 0.5s;
animation-fill-mode: both;
opacity: 0;
}
.header-page-accueil .slick-active .button{
animation-name: fadeInUp;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: both;
opacity: 0;
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@media screen and (max-width: 425px){
.header-page-accueil.hero.is-fullheight{
padding-top: 220px;
background-color: var(--color-4);
height: 500px;
min-height: auto;
}
.slider-home{
height: 100%;
}
.slider-home .slick-list, .slider-home .slick-track{
height: 100%;
}
.header-page-accueil h2.title{
font-size: 2rem;
}
.header-page-accueil h3.subtitle{
font-size: 1rem;
}
.header-page-accueil .button{
font-size: 1rem;
width: 200px;
}
}
JS : (ajouter JS slick carousel )
$(document).ready(function () {
$('.slider-home').slick({
autoplay: true,
fade: true,
speed: 2000,
cssEase: 'ease-in-out'
});
});