GavaScript Carousel Lake Presentation Gallery ⇐ CSS

[Anonymous]

Я своего рода начинающий застройщик, и в университете я должен сделать веб -сайт, и я хотел сделать карусель в Blackbox AI и CHATGPT, на самом деле это не помогло, это не сработало.
Моя цель состоит в том, чтобы иметь текст и изображение, затем нажимать на стрелку, отображается другой текст и изображение вместо того, что уже присутствует. < /p>
Вот Мои контейнеры + JS я пытался использовать: < /p>


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
}
}< /code>
.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;
}< /code>

Voyager à Londres pendant les vacances de Noël
Ici, vous allez comprendre à quel point Londres est une destination parfaite pour des vacances à la période de Noël.
La ville est magnifiquement décorée avec des lumières scintillantes et des marchés de Noël animés.
Vous pouvez également profiter de la patinoire en plein air et des spectacles de Noël.
Ne manquez pas de visiter les célèbres attractions touristiques comme le London Eye, le Tower Bridge et le Palais de Buckingham.
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.
Alors, préparez-vous à vivre une expérience inoubliable à Londres pendant les vacances de Noël !





→ Voir plus



Les marchés de Noël
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.






Les spectacles de Noël
Assistez à des spectacles de Noël dans les théâtres de Londres, avec des performances qui raviront toute la famille.





< /code>
< /div>
< /div>
< /p>
Я старался не касаться тела в CSS, потому что у меня есть 9 других Страницы в той же таблице стилей, чтобы это изменилось на каждом, я думаю. мне, что делать!

Подробнее здесь: https://stackoverflow.com/questions/793 ... on-gallery