Créer un Slider Responsive avec Image à Gauche et Texte à Droite avec HTML, CSS et JavaScript

Ce tutoriel vous montre comment créer un slider responsive où l’image est affichée à gauche et le texte à droite. Ce slider s’ajuste automatiquement en fonction de la taille de l’écran, offrant une excellente expérience sur tous les appareils.

Image Left, Text Right Slider

Slide 1

Ce texte est un exemple de description pour la première diapositive. Vous pouvez le modifier selon vos besoins.

Slide 2

Un autre exemple de texte qui peut être utilisé pour une présentation ou un contenu informatif.

Slide 3

Ajoutez du contenu intéressant pour chaque diapositive. Le style est optimisé pour s’adapter à toutes les tailles d’écran.

Pré-requis :

Des connaissances de base en HTML, CSS et JavaScript.
Connexion Internet pour utiliser les bibliothèques externes comme Swiper.js.

Étape 1 : Structure HTML de base

Tout d’abord, nous allons créer la structure HTML de notre page. Nous allons inclure une div principale pour le slider, contenant plusieurs slides, chaque slide comprenant une image et du texte.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Responsive slider with an image on the left and text on the right, optimized for all screen sizes.">
  <meta name="keywords" content="responsive slider, image and text slider, HTML CSS JS, Swiper.js">
  <meta name="author" content="Your Name">
  <title>Image Left, Text Right Slider</title>

  <!-- Lien vers Swiper.js CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

  <style>
    /* Styles de base */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      overflow-x: hidden; /* Évite tout débordement horizontal */
    }

    .slider-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      box-sizing: border-box;
    }

    .swiper {
      width: 100%;
      height: 60vh; /* Hauteur ajustée pour être plus équilibrée sur les grands écrans */
      max-height: 600px; /* Limite la hauteur à 600px pour les grands écrans */
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .swiper-slide {
      display: flex;
      align-items: center;
    }

    /* Conteneur pour l'image et le texte */
    .slide-content {
      display: flex;
      width: 100%;
      height: 100%;
    }

    /* Image */
    .slide-image {
      flex: 0 0 70%; /* L'image occupe 70% */
      height: 100%;
      background-color: #ddd;
    }

    .slide-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Texte */
    .slide-text {
      flex: 0 0 30%; /* Le texte occupe 30% */
      padding: 20px;
      box-sizing: border-box;
      color: #333;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-left: 1px solid #ddd;
    }

    .slide-text h2 {
      margin: 0 0 10px;
      font-size: 24px;
      color: #007bff;
    }

    .slide-text p {
      margin: 0;
      font-size: 16px;
      line-height: 1.5;
    }

    /* Navigation */
    .swiper-button-next, .swiper-button-prev {
      color: #007bff;
    }

    /* Pagination */
    .swiper-pagination-bullet {
      background: #007bff;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .swiper {
        height: auto;
      }

      .slide-content {
        flex-direction: column; /* Empile l'image et le texte */
      }

      .slide-image {
        flex: 0 0 auto; /* Image pleine largeur */
        width: 100%;
        height: 200px;
      }

      .slide-text {
        flex: 0 0 auto; /* Texte pleine largeur */
        width: 100%;
        padding: 10px;
        border-left: none;
        border-top: 1px solid #ddd;
      }

      .slide-text h2 {
        font-size: 18px;
      }

      .slide-text p {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  <div class="slider-container">
    <!-- Slider Swiper -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <!-- Slide 1 -->
        <div class="swiper-slide">
          <div class="slide-content">
            <div class="slide-image">
              <img src="https://images.unsplash.com/photo-1627308595229-7830a5c91f9f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1200" alt="Nature 1">
            </div>
            <div class="slide-text">
              <h2>Slide 1</h2>
              <p>Ce texte est un exemple de description pour la première diapositive. Vous pouvez le modifier selon vos besoins.</p>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="swiper-slide">
          <div class="slide-content">
            <div class="slide-image">
              <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1200" alt="Nature 2">
            </div>
            <div class="slide-text">
              <h2>Slide 2</h2>
              <p>Un autre exemple de texte qui peut être utilisé pour une présentation ou un contenu informatif.</p>
            </div>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="swiper-slide">
          <div class="slide-content">
            <div class="slide-image">
              <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1200" alt="Nature 3">
            </div>
            <div class="slide-text">
              <h2>Slide 3</h2>
              <p>Ajoutez du contenu intéressant pour chaque diapositive. Le style est optimisé pour s'adapter à toutes les tailles d'écran.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Pagination -->
      <div class="swiper-pagination"></div>

      <!-- Navigation -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>

  <!-- Swiper.js -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <script>
    // Initialisation de Swiper.js
    const swiper = new Swiper('.swiper', {
      loop: true,
      autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
      speed: 800,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>

Show

Explication du code :

HTML :
- Le slider est créé avec la bibliothèque Swiper.js. Chaque slide contient une image et un texte, et les slides sont automatiquement organisées en un ensemble défilant.
CSS :
- Utilisation de flexbox pour disposer l’image à gauche et le texte à droite dans chaque slide.
- La hauteur du slider est ajustée à 60vh (60% de la hauteur de la fenêtre) et un max-height de 600px est appliqué pour garder un aspect équilibré.
- Un design responsive est ajouté avec une directive @media pour empiler l’image et le texte sur les petits écrans.
JavaScript :
- Swiper.js est utilisé pour créer l’effet de slider avec une pagination et une navigation.
- La fonction autoplay permet de faire défiler les slides automatiquement.

Conseils pour personnaliser le slider :

Changer la vitesse : Modifiez la valeur de speed: 800 dans le script pour ajuster la vitesse de transition.
Autoplay : Pour changer l’intervalle entre chaque slide, ajustez delay: 4000 (valeur en millisecondes).
Ajouter plus de slides : Il suffit de copier et coller les sections <div class="swiper-slide"> pour ajouter plus de contenus.

Ce tutoriel vous permet de créer un slider moderne, élégant et responsive, tout en restant compatible avec les appareils mobiles et les grands écrans de bureau.