Javascript carousel like-presentation gallery

Question

I'm kind of a beginner developper and at university I have to do a website, and I wanted to do a carousel in the but blackbox AI and ChatGPT didn't really helped, it didn't work.

My objective is to have a text and an image, then clicking on an arrow, another text and image are shown instead of the one already present.

Here's my containers + the js I tried to use :

let currentContainerIndex = 0; // Index du container actuel
const containers = document.querySelectorAll("#additionalContainers .container");

function toggleContainers() {
  if (currentContainerIndex < containers.length) {
    containers[currentContainerIndex].classList.remove("hidden");
    currentContainerIndex++;
  } else {
    currentContainerIndex = 0; // Réinitialiser l'index
    containers.forEach(container => container.classList.add("hidden")); // Cacher tous les containers
  }
}

.container {
  /*Container du texte et de l'image*/
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  width: 85%;
  max-width: 1200px;
  gap: 20px;
  background-color: #d2d4e7;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.container:hover {
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

.sectiontext,
.sectionimage {
  /*Sections*/
  flex: 1;
  background-color: #edefff;
  padding: 20px;
  box-sizing: border-box;
  border: 2px solid #464e73;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.sectiontext:hover,
.sectionimage:hover {
  transform: scale(1.02);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  border-color: #6a82e8;
}

.sectionimage img {
  /*Image*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.hidden {
  display: none;
}

.container {
  margin-bottom: 20px;
}

.arrow {
  cursor: pointer;
  font-size: 24px;
  margin: 10px 0;
}

<div class="sectiontext">
  <h2>Voyager à Londres pendant les vacances de Noël</h2>
  <p>Ici, vous allez comprendre à quel point Londres est une destination parfaite pour des vacances à la période de Noël.</p>
  <p>La ville est magnifiquement décorée avec des lumières scintillantes et des marchés de Noël animés.</p>
  <p>Vous pouvez également profiter de la patinoire en plein air et des spectacles de Noël.</p>
  <p>Ne manquez pas de visiter les célèbres attractions touristiques comme le London Eye, le Tower Bridge et le Palais de Buckingham.</p>
  <p>Vous pouvez également faire du shopping dans les grands magasins de Londres et déguster des plats délicieux dans les restaurants de la ville.</p>
  <p>Alors, préparez-vous à vivre une expérience inoubliable à Londres pendant les vacances de Noël !</p>
</div>
<div class="sectionimage">
  <img src="images/londoneye.jpg" alt="Image du London Eye de nuit" />
</div>
</div>

<div class="arrow" onclick="toggleContainers()">&#x2192; Voir plus</div>

<div id="additionalContainers" class="hidden">
  <div class="container">
    <div class="sectiontext">
      <h2>Les marchés de Noël</h2>
      <p>Les marchés de Noël à Londres sont un incontournable. Vous y trouverez des cadeaux artisanaux, des décorations et des spécialités culinaires.</p>
    </div>
    <div class="sectionimage">
      <img src="images/marche_noel.jpg" alt="Marché de Noël à Londres" />
    </div>
  </div>
  <div class="container">
    <div class="sectiontext">
      <h2>Les spectacles de Noël</h2>
      <p>Assistez à des spectacles de Noël dans les théâtres de Londres, avec des performances qui raviront toute la famille.</p>
    </div>
    <div class="sectionimage">
      <img src="images/spectacle_noel.jpg" alt="Spectacle de Noël à Londres" />
    </div>
  </div>
</div>
</main>

I tried not to touch at the body in css because I have 9 other pages in the same stylesheet so it would change on each I guess.

If you need another details ask me

It would be great if you explain to me what to do !

Answer 1

Something like this, maybe?

The idea is that all of the containers are in the same... container-containing container, so they're easy to iterate over, and easy to hide based on the currently selected index (and the same function is used to initialize the hide state, as well as update it when the visible index changes).

let currentContainerIndex = 0; // Index du container actuel
const containers = document.querySelectorAll("#containers>.container");

function updateContainerHideState() {
  for (let i = 0; i < containers.length; i++) {
    containers[i].classList.toggle("hidden", (i !== currentContainerIndex));
  }
}

function toggleContainers() {
  currentContainerIndex = (currentContainerIndex + 1) % containers.length;
  updateContainerHideState();
}

updateContainerHideState();

.container {
  /*Container du texte et de l'image*/
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  width: 85%;
  max-width: 1200px;
  gap: 20px;
  background-color: #d2d4e7;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.container:hover {
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

.sectiontext,
.sectionimage {
  /*Sections*/
  flex: 1;
  background-color: #edefff;
  padding: 20px;
  box-sizing: border-box;
  border: 2px solid #464e73;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.sectiontext:hover,
.sectionimage:hover {
  transform: scale(1.02);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  border-color: #6a82e8;
}

.sectionimage img {
  /*Image*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.hidden {
  display: none;
}

.container {
  margin-bottom: 20px;
}

.arrow {
  cursor: pointer;
  font-size: 24px;
  margin: 10px 0;
}

<div id="containers">
  <div class="container">
    <div class="sectiontext">
      <h2>Voyager à Londres pendant les vacances de Noël</h2>
      <p>Ici, vous allez comprendre à quel point Londres est une destination parfaite pour des vacances à la période de Noël.</p>
      <p>La ville est magnifiquement décorée avec des lumières scintillantes et des marchés de Noël animés.</p>
      <p>Vous pouvez également profiter de la patinoire en plein air et des spectacles de Noël.</p>
      <p>Ne manquez pas de visiter les célèbres attractions touristiques comme le London Eye, le Tower Bridge et le Palais de Buckingham.</p>
      <p>Vous pouvez également faire du shopping dans les grands magasins de Londres et déguster des plats délicieux dans les restaurants de la ville.</p>
      <p>Alors, préparez-vous à vivre une expérience inoubliable à Londres pendant les vacances de Noël !</p>
    </div>
    <div class="sectionimage">
      <img src="images/londoneye.jpg" alt="Image du London Eye de nuit" />
    </div>
  </div>
  <div class="container">
    <div class="sectiontext">
      <h2>Les marchés de Noël</h2>
      <p>Les marchés de Noël à Londres sont un incontournable. Vous y trouverez des cadeaux artisanaux, des décorations et des spécialités culinaires.</p>
    </div>
    <div class="sectionimage">
      <img src="images/marche_noel.jpg" alt="Marché de Noël à Londres" />
    </div>
  </div>
  <div class="container">
    <div class="sectiontext">
      <h2>Les spectacles de Noël</h2>
      <p>Assistez à des spectacles de Noël dans les théâtres de Londres, avec des performances qui raviront toute la famille.</p>
    </div>
    <div class="sectionimage">
      <img src="images/spectacle_noel.jpg" alt="Spectacle de Noël à Londres" />
    </div>
  </div>
</div>

<div class="arrow" onclick="toggleContainers()">&#x2192; Voir plus</div>