HTML:
<input type="checkbox" id="menu-toggle"/>  <label id="trigger" for="menu-toggle"></label>  <label id="burger" for="menu-toggle"></label>  <ul id="menu">    <li class="menuLi"><a class="menuA" href="#">Activités à  la ferme</a></li>    <li class="menuLi"><a class="menuA" href="#">Séjour à  la ferme</a></li>    <li class="menuLi"><a class="menuA" href="#">Ferme équestre</a></li>    <li class="menuLi"><a class="menuA" href="#">élevage chevaux</a></li>    <li class="menuLi"><a class="menuA" href="#">Produits fermiers</a></li>    <hr class="seperate">    <li class="menuLi"><a class="menuA" href="#">Notre Philosophie</a></li>    <li class="menuLi"><a class="menuA" href="#">Notre équipe</a></li>    <li class="menuLi"><a class="menuA" href="#">Accès et contact</a></li>  </ul>  <nav class="navRight">    <ul class="aboutUs">      <li><a href="#">Notre Philosophie</a></li>      <li><a href="#">Notre équipe</a></li>      <li><a href="#">Accès et contact</a></li>    </ul>  </nav>  <section class="header-page-accueil hero is-fullheight">      <div class="slider-home">        <div class="slide">          <img src="<?php echo get_template_directory_uri(); ?>/css/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="<?php echo get_template_directory_uri(); ?>/css/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="<?php echo get_template_directory_uri(); ?>/css/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 class="slide">          <img src="<?php echo get_template_directory_uri(); ?>/css/img/image4.jpg" alt="Image 4">          <div class="texte-slide">              <h2 class="title is-1 has-text-centered">Titre 4</h2>              <h3 class="subtitle is-3 has-text-centered">Sous-titre 4</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="<?php echo get_template_directory_uri(); ?>/css/img/image5.jpg" alt="Image 5">          <div class="texte-slide">              <h2 class="title is-1 has-text-centered">Titre 5</h2>              <h3 class="subtitle is-3 has-text-centered">Sous-titre 5</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="<?php echo get_template_directory_uri(); ?>/css/img/image6.jpg" alt="Image 6">          <div class="texte-slide">              <h2 class="title is-1 has-text-centered">Titre 6</h2>              <h3 class="subtitle is-3 has-text-centered">Sous-titre 6</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>   </section>  <div class="flag">    <img src="<?php echo get_template_directory_uri(); ?>/css/img/france.png" alt="france">    <img src="<?php echo get_template_directory_uri(); ?>/css/img/united-kingdom.png" alt="united kingdom">    <img src="<?php echo get_template_directory_uri(); ?>/css/img/netherlands.png" alt="netherlands">   </div>
CSS:
.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-delay: 1.5s;  animation-fill-mode: both;  opacity: 0; } .header-page-accueil .slick-active h3{  animation-name: fadeInRight;  animation-duration: 2s;  animation-delay: 1.5s;  animation-fill-mode: both;  opacity: 0; } .header-page-accueil .slick-active .button{  animation-name: fadeInUp;  animation-duration: 2s;  animation-delay: 2s;  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{    background-color: var(--color-4);    height: 100vh;    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;  } } .slick-slider{  position: relative;  display: block;  box-sizing: border-box;  -webkit-user-select: none;     -moz-user-select: none;      -ms-user-select: none;          user-select: none;  -webkit-touch-callout: none;  -khtml-user-select: none;  -ms-touch-action: pan-y;      touch-action: pan-y;  -webkit-tap-highlight-color: transparent; } .slick-list{  position: relative;  display: block;  overflow: hidden;  margin: 0;  padding: 0; } .slick-list:focus{  outline: none; } .slick-list.dragging{  cursor: pointer;  cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list{  -webkit-transform: translate3d(0, 0, 0);     -moz-transform: translate3d(0, 0, 0);      -ms-transform: translate3d(0, 0, 0);       -o-transform: translate3d(0, 0, 0);          transform: translate3d(0, 0, 0); } .slick-track{  position: relative;  top: 0;  left: 0;  display: block;  margin-left: auto;  margin-right: auto; } .slick-track:before, .slick-track:after{  display: table;  content: ''; } .slick-track:after{  clear: both; } .slick-loading .slick-track{  visibility: hidden; } .slick-slide{  display: none;  float: left;  height: 100%;  min-height: 1px; } [dir='rtl'] .slick-slide{  float: right; } .slick-slide img{  display: block; } .slick-slide.slick-loading img{  display: none; } .slick-slide.dragging img{  pointer-events: none; } .slick-initialized .slick-slide{  display: block; } .slick-loading .slick-slide{  visibility: hidden; } .slick-vertical .slick-slide{  display: block;  height: auto;  border: 1px solid transparent; } .slick-arrow.slick-hidden {  display: none; } .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); } .slick-dots {  width: 100%;  position: absolute;  right: 0;  top: 50%;  transform: translateY(-50%);  list-style: none;  text-align: center;  margin: 0px 3px;  padding: 11% 1% 11% 1.5%;  width: 100%;  height: 100%;  display: flex;  flex-direction: column;  justify-content: space-between; } .slick-dots li button{  width: 0px;  height: 0px;  visibility: hidden; } .slick-dots li{  width: 240px;  height: 40px;  border-radius: 8px;  box-shadow: 8px 8px 20px -5px rgba(99, 99, 99, 0.4);  -webkit-box-shadow: 8px 8px 20px -5px rgba(99, 99, 99, 0.4);  -moz-box-shadow: 8px 8px 20px -5px rgba(99, 99, 99, 0.4);  background-color: rgba(99, 99, 99, 0.7);  color: white;  display: flex;  justify-content: center;  align-items: center; } .slick-dots li[class="slick-active"]{  background-color: var(--menu-bg-color-hover);  color: var(--menu-color-hover);  animation: shift .5s ease-in forwards;  animation-delay: 2s; } @keyframes shift{  0%{    margin-left: 5px;  }  100%{    margin-left: 35px;  } } .slick-dots li:after{  text-transform: uppercase;  font-weight: 700;  position: relative;  left: -8px; } .slick-dots li:nth-child(1):after {  content: "Activités à  la ferme"; } .slick-dots li:nth-child(2):after {  content: "Séjour à  la ferme"; } .slick-dots li:nth-child(3):after {  content: "Ferme équestre"; } .slick-dots li:nth-child(4):after {  content: "élevage chevaux"; } .slick-dots li:nth-child(5):after {  content: "élevage gros animaux"; } .slick-dots li:nth-child(6):after {  content: "Produits fermiers"; } /* Qui sommes nous */ .aboutUs{  position: absolute;  right: 0;  top: 50%;  transform: translateY(-50%);  list-style: none;  text-align: center;  margin: 0px 3px;  padding: 11% 1% 11% 1.5%;  height: 100%;  display: flex;  flex-direction: column;  justify-content: space-evenly;  z-index: 2; } .aboutUs li{  width: 240px;  height: 40px;  line-height: 40px;  border-radius: 8px;  text-transform: uppercase;  font-weight: 700;  box-shadow: -8px 8px 20px -5px rgba(99, 99, 99, 0.4);  -webkit-box-shadow: -8px 8px 20px -5px rgba(99, 99, 99, 0.4);  -moz-box-shadow: -8px 8px 20px -5px rgba(99, 99, 99, 0.4);  background-color: rgba(99, 99, 99, 0.7); } .aboutUs a{  color: white; } .aboutUs li:hover{  background-color: var(--menu-bg-color-hover); } .aboutUs li:hover a{  color: var(--menu-color-hover); } /* sélecteur de langue */ .flag{  position: relative;  bottom: 30px;  display: flex;  justify-content: flex-end; } .flag img{  width: 25px;  height: auto;  margin-right: 10px; } /* Media Queries */ @media screen and (min-width: 769px){  #menu-toggle, #trigger, #burger, #menu{    display: none;  } } @media screen and (max-width: 768px){  .slick-dots li, .aboutUs, .flag{    display: none;   }  .header-page-accueil{    padding-top: 0;   }  @keyframes checked-anim {    50% {      width: 100vw;      height: 100vh;    }    100% {      width: 100%;      height: 100%;      border-radius: 0;    }   }  @keyframes not-checked-anim {    0% {      width: 100vw;      height: 100vh;    }   }  .menuLi, .menuA, .seperate {    color: #3a3a3a;    font: 14pt "Roboto", sans-serif;    font-weight: 700;    line-height: 1.8;    text-decoration: none;    text-transform: none;    list-style: none;    outline: 0;    display: none;    z-index: 1;    animation-direction: reverse;    line-height: 50px;   }  .menuLi {    width: 400px;    text-indent: 56px;    z-index: 1;   }  .menuA:focus {    display: block;    color: #333;    background-color: #eee;    transition: all .5s;    z-index: 1;  }  #trigger, #burger, #burger:before, #burger:after {    position: absolute;    top: 25px;    right: 25px;    background-color: var(--menu-color-hover);    width: 30px;    height: 5px;    transition: .2s ease;    cursor: pointer;    z-index: 2;   }  #trigger {    height: 25px;    background: none;    z-index: 2;   }  #burger:before {    content: " ";    top: 10px;    left: 0;    z-index: 2;   }  #burger:after {    content: " ";    top: 20px;    left: 0;    z-index: 2;   }  #menu-toggle:checked + #trigger + #burger {    top: 35px;    transform: rotate(360deg);    transition: transform .2s ease;    z-index: 2   }  #menu-toggle:checked + #trigger + #burger:before {    width: 20px;    top: -2px;    left: 18px;    transform: rotate(45deg) translateX(-5px);    transition: transform .2s ease;    z-index: 2;   }  #menu-toggle:checked + #trigger + #burger:after {    width: 20px;    top: 2px    left: 18px;    transform: rotate(-45deg) translateX(-5px);    transition: transform .2s ease;    z-index: 2;   }  #menu {    position: absolute;    right: 0;    margin: 0;    padding: 0;    width: 110px;    height: 110px;    background-color: #fff;    border-bottom-left-radius: 100%;    box-shadow: 0 2px 5px rgba(0,0,0,0.26);    animation: not-checked-anim .1s both;    transition: .1s;    z-index: 1;   }  #menu li:nth-child(1){    margin-top: 11vh;   }  #menu li:nth-child(7):before{    content: "Qui somme-nous ?";    color: var(--black);    text-transform: uppercase;    font-size: 25px;   }  #menu-toggle:checked + #trigger + #burger + #menu {    animation: checked-anim 1s ease both;    z-index: 1;   }  #menu-toggle:checked + #trigger ~ #menu > .menuLi, .menuA {    display: block;    z-index: 1;   }  #menu-toggle:checked + #trigger ~ #menu > .seperate {    display: block;    z-index: 1;   }  .seperate{    background: var(--black);    width: 30%;    margin-left: 7%;   }  [type="checkbox"]:not(:checked), [type="checkbox"]:checked {    display: none;    z-index: 1;  } }
Javascript (jQuery):
$(document).ready(function () {    $('.slider-home').slick({        dots: true,        arrows: false,        autoplay: true,        autoplaySpeed: 5000,        fade: true,        cssEase: 'ease-in-out'    });    $('.slick-dots li').on('mouseover', function() {        $('.slider-home').slick('goTo', $(this).index());    }); });