logo

Carrousel header

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'
    });
});

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *