Comment créer un diaporama plein écran en utilisant HTML, CSS3 et jQuery ?

Dans ce tutoriel, nous allons créer un diaporama ou slider plein écran en utilisant HTML, CSS3 et jQuery. Vous pouvez l'utiliser pour présenter vos produits sur le site de votre boutique.

Dans ce tutoriel, nous utilisons les polices Google Fonts, en particulier Montserrat et Oswald. Assurez-vous de les inclure avant de commencer.

HTML

La première étape consiste à créer une structure HTML. Voici ce dont nous avons besoin :

• Un menu de navigation
• Un conteneur div pour le slider avec un nom de classe css-slider-wrapper
• Quatre diapositives ; chacune comporte des éléments tels que des boutons/images/texte
• Pagination des diapositives

Voici le code source HTML :

<!-- Navigation -->
<div class="navigation">
  <div class="navigation-left">
    <a href="#">Shoes</a>
    <a href="#">Clothes</a>
    <a href="#">Accessories</a>
  </div>
  <div class="navigation-center">
    <img src="images/logo.png" alt="">
  </div>
  <div class="navigation-right">
    <a href="#"><img src="images/shopping-bag.png" alt=""></a>
    <button class="login-btn" href="#">Login</button>
  </div>
</div>
 
<!-- Slider Wrapper -->
<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">
 
  <!-- Slider Pagination -->
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>
 
  <!-- Slider #1 -->
  <div class="slider slide-1">
    <img src="images/model-1.png" alt="">
    <div class="slider-content">
      <h4>New Product</h4>
      <h2>Denim Longline T-Shirt Dress With Split</h2>
      <button type="button" class="buy-now-btn" name="button">$130</button>
    </div>
    <div class="number-pagination">
      <span>1</span>
    </div>
  </div>
 
  <!-- Slider #2 -->
  <div class="slider slide-2">
    <img src="images/model-2.png" alt="">
    <div class="slider-content">
      <h4>New Product</h4>
      <h2>Denim Longline T-Shirt Dress With Split</h2>
      <button type="button" class="buy-now-btn" name="button">$130</button>
    </div>
    <div class="number-pagination">
      <span>2</span>
    </div>
  </div>
 
  <!-- Slider #3 -->
  <div class="slider slide-3">
    <img src="images/model-3.png" alt="">
    <div class="slider-content">
      <h4>New Product</h4>
      <h2>Denim Longline T-Shirt Dress With Split</h2>
      <button type="button" class="buy-now-btn" name="button">$130</button>
    </div>
    <div class="number-pagination">
      <span>3</span>
    </div>
  </div>
 
  <!-- Slider #4 -->
  <div class="slider slide-4">
    <img src="images/model-4.png" alt="">
    <div class="slider-content">
      <h4>New Product</h4>
      <h2>Denim Longline T-Shirt Dress With Split</h2>
      <button type="button" class="buy-now-btn" name="button">$130</button>
    </div>
    <div class="number-pagination">
      <span>4</span>
    </div>
  </div>
</div>

CSS

Tout d'abord, ajoutons un style de base au corps.

* {
  box-sizing: border-box;
}
 
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

Maintenant, nous allons mettre en forme le menu de navigation ; nous allons le faire en pleine largeur avec un peu de marge intérieure. Nous utiliserons la méthode flexbox pour aligner les éléments à l'intérieur du menu, que nous allons également styliser.

/* Navigation */
.navigation {
  position: absolute;
  width: 100%;
  height: 100px;
  padding: 0 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
 
.navigation-left {
  margin-left: -33px;
}
 
.navigation-left a {
  text-decoration: none;
  text-transform: uppercase;
  color: #333745;
  font-size: 12px;
  font-weight: bold;
  width: 107px;
  height: 30px;
  border: 2px solid transparent;
  border-radius: 15px;
  display: inline-block;
  text-align: center;
  line-height: 25px;
  transition: all .2s;
}
 
.navigation-left a:hover,
.navigation-left a:focus {
  border-color: rgb(234, 46, 73);
  background-color: rgba(44, 45, 47, 0);
}
 
.navigation-center {
  margin-right: 85px;
}
 
.navigation-right {
  display: flex;
  align-items: center;
}
 
.login-btn {
  background-color: #b8b8b9;
  width: 97px;
  height: 30px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  border-radius: 15px;
  border: none;
  color: #333745;
  text-transform: uppercase;
  margin-left: 20px;
  transition: all .2s;
  cursor: pointer;
}
.login-btn:hover {
  transform: scale(1.06);
}

Bien ! Maintenant, donnons du style au conteneur du curseur.

Il s'agira d'une barre de défilement en plein écran, nous allons donc lui donner une position absolue.

.css-slider-wrapper {
  display: block;
  background: #FFF;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

Stylisons également les diapositives, la classe commune que nous avons appliquée et la classe pour chaque diapositive où nous ajoutons une couleur de fond à chacune d'elles.

/* Slider */
.slider {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  z-index: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}
 
/* Slides Background Color */
.slide-1 {
  background: #fbad99;
  left: 0;
}
.slide-2 {
  background: #a9785c;
  left: 100%
}
.slide-3 {
  background: #9ea6b3;
  left: 200%
}
.slide-4 {
  background: #b1a494;
  left: 300%;
}
.slider {
  display: flex;
  justify-content: flex-start;
}
.slider-content {
  width: 635px;
  padding-left: 100px;
}

Maintenant, donnez un style aux éléments de chaque diapositive. Rappelez-vous que nous avons du texte, un bouton et une image.

/* Slider Inner Slide Effect */
.slider h2 {
  color: #333333;
  font-weight: 900;
  text-transform: capitalize;
  font-size: 60px;
  font-weight: 300;
  line-height: 1.2;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
  margin-top: 0;
  letter-spacing: 2px;
}
 
.slider h4 {
  font-size: 22px;
  font-family: "Oswald";
  color: rgba(51, 51, 51, 0.349);
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}
 
.slider > img {
  position: absolute;
  right: 10%;
  bottom: 0;
  height: 100%;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}
 
.slide-1 > img {
  right: 0;
}
 
.buy-now-btn {
  background-color: #ea2e49;
  width: 220px;
  height: 50px;
  border-radius: 30px;
  border: none;
  font-family: Montserrat;
  font-size: 20px;
  font-weight: 100;
  color: #fff;
  text-align: left;
  padding-left: 35px;
  position: relative;
  cursor: pointer;
  transition: all .2s;
}
 
.buy-now-btn:hover {
  box-shadow: 0px 0px 60px -17px rgba(51,51,51,1);
}
 
.buy-now-btn:after {
  content: 'Buy Now';
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  right: 35px;
  top: 18px;
}
 
.slider .buy-now-btn:focus,
.navigation .login-btn:focus {
  outline: none;
}

Veillons également à ce que, lorsque la diapositive change, les éléments qu'elle contient - tels que le texte et les images - s'animent.

/* Animations */
.slider h2 {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
}
.slider h4 {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1.4s; /* Safari */
  transition-delay: 1.4s;
}
.slider > img {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1.2s; /* Safari */
  transition-delay: 1.2s;
}

Nous avons également une pagination numérique dans le coin droit de chaque diapositive. Nous allons également les styliser.

/* Number Pagination */
.number-pagination {
  position: absolute;
  bottom: 30px;
  right: 100px;
  font-family: "Oswald";
  font-weight: bold;
}
 
.number-pagination span {
  font-size: 30px;
  color: #ea2e49;
  letter-spacing: 4px;
}
 
.number-pagination span:after {
  content: "/4";
  font-size: 16px;
  color: #fff;
}

Magnifique ! Maintenant, stylisons la pagination du slider.

/* Slider Pagger */
.slider-pagination {
  position: absolute;
  bottom: 30px;
  width: 575px;
  left: 100px;
  z-index: 1000;
  display: flex;
  align-items: center;
}
.slider-pagination label {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #fff;
  margin: 0 10px;
  cursor: pointer;
}

Ok, bien ! À présent, voici la partie amusante et où la magie se produit.

Notez que nous allons utiliser la pseudo-classe :checked pour contrôler le défilement.

La pseudo-classe :checked sélectionne les éléments lorsqu'ils sont dans l'état sélectionné. Elle est uniquement associée aux éléments champs d'entrée (input type="text"/) de type radio et checkbox. Le sélecteur de pseudo-classe :checked correspond aux éléments d'entrée de type radio et checkbox lorsqu'ils sont cochés ou affichés dans un état activé. S'ils ne sont pas sélectionnés ou cochés, il n'y a pas de correspondance.

/* Slider Pagger Event */
.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4 {
  width: 14px;
  height: 14px;
  border: 2px solid #ea2e49;
  background: transparent;
}
 
/* Slider Slide Effect */
.slide-radio1:checked ~ .slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
  -webkit-transform: translateX(-300%);
  transform: translateX(-300%);
}
 
.slide-radio1:checked ~ .slide-1 h2,
.slide-radio2:checked ~ .slide-2 h2,
.slide-radio3:checked ~ .slide-3 h2,
.slide-radio4:checked ~ .slide-4 h2,
.slide-radio1:checked ~ .slide-1 h4,
.slide-radio2:checked ~ .slide-2 h4,
.slide-radio3:checked ~ .slide-3 h4,
.slide-radio4:checked ~ .slide-4 h4,
.slide-radio1:checked ~ .slide-1 > img,
.slide-radio2:checked ~ .slide-2 > img,
.slide-radio3:checked ~ .slide-3 > img,
.slide-radio4:checked ~ .slide-4 > img {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1
}

Excellent ! Voici à quoi ressemble notre diaporama/slider en plein écran :

C'est super, non ? Mais faisons en sorte qu'il soit responsive.

/* Responsive */
@media only screen and (max-width: 768px) {
  .slider h2 {
    font-size: 20px;
  }
  .slider h4 {
    font-size: 16px;
  }
 
  .slider-content {
    padding: 0 2%
  }
 
  .navigation {
    padding: 0 2%;
  }
 
  .navigation-left {
    display: none;
  }
 
  .number-pagination {
    right: 2%;
  }
  .slider-pagination {
    left: 2%;
  }
 
  .slider .buy-now-btn {
    padding: 0 15px;
    width: 175px;
    height: 42px;
  }
 
  .slider .buy-now-btn:after {
    top: 15px;
  }
 
  .slider > img {
    right: 2%;
  }
 
  .slide-1 > img {
    right: -110px;
  }
}

Javascript (jQuery)

Nous avons encore une chose à faire. Notre slider ne change que lorsque l'on clique sur les puces de pagination. Nous allons utiliser du Javascript pour que le slider change automatiquement. Assurez-vous d'inclure d'abord jQuery dans votre projet, puis ajoutez ce code à votre fichier javascript.

var TIMEOUT = 6000;
 
var interval = setInterval(handleNext, TIMEOUT);
 
function handleNext() {
 
  var $radios = $('input[class*="slide-radio"]');
  var $activeRadio = $('input[class*="slide-radio"]:checked');
 
  var currentIndex = $activeRadio.index();
  var radiosLength = $radios.length;
 
  $radios
    .attr('checked', false);
 
  if (currentIndex >= radiosLength - 1) {
 
    $radios
      .first()
      .attr('checked', true);
 
  } else {
 
    $activeRadio
      .next('input[class*="slide-radio"]')
      .attr('checked', true);
 
  }
 
}

Conclusion

Fantastique ! Nous avons terminé ! J'espère que ce tutoriel vous a permis de comprendre tout ce qu'il est possible de faire avec CSS et plus particulièrement avec la pseudo-classe :checked.

Vous pouvez maintenant l'utiliser pour présenter vos produits sur le site de votre boutique. N'hésitez donc pas à l'utiliser dans vos projets et à partager ce tutoriel.