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