Динамически добавляйте изображения в слайдер/карусель изображений, используя HTML, CSS и Javascript. ⇐ CSS

[Anonymous]

Вот код демонстрационного приложения для показа изображений в карусели. Он хорошо работает со статическими изображениями. Но я хочу добавлять изображения в карусель динамически при нажатии кнопки.
Я добавлял изображения при нажатии кнопки, и они добавляют их в контейнер, который я могу увидеть, если отлаживаю страницу с помощью инструментов разработчика браузера. Но изображение не отображается в карусели.
Ссылка на CodePen

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function() {
let carousel = document.querySelector(".carousel");
let items = carousel.querySelectorAll(".item");

// Function to show a specific item
function showItem(index) {
items.forEach((item, idx) => {
item.classList.remove("active");
if (idx === index) {
item.classList.add("active");
}
});
}

// Event listeners for buttons
document.querySelector(".prev").addEventListener("click", () => {
let index = [...items].findIndex((item) =>
item.classList.contains("active")
);
showItem((index - 1 + items.length) % items.length);
});

document.querySelector(".next").addEventListener("click", () =>  {
let index = [...items].findIndex((item) =>
item.classList.contains("active")
);
showItem((index + 1) % items.length);
});
});

//I tried the following function:
function buttonClicked() {
const carouselContainer = document.querySelector('.carousel');

// Create the carousel item
const carouselItemContainer = document.createElement('div');
carouselItemContainer.classList.add('item');

// Create image element
const imageElement = document.createElement('img');
imageElement.src = "image URL";
imageElement.alt = "test image";
imageElement.classList.add("active");

// Add a title below the image
const imageTitle = document.createElement('p');
imageTitle.textContent = "title of test image";
imageTitle.classList.add('caption');

carouselItemContainer.appendChild(imageElement);
carouselItemContainer.appendChild(imageTitle);
carouselContainer.appendChild(carouselItemContainer);
}

Код: Выделить всё

body {
min-height: 100dvh;
display: flex;
align-items: center;
font-family: "Satoshi", sans-serif;
font-size: var(--lx-text-01);
font-weight: 500;
color: #ffffe6;
background-color: #10100e;
}

.carousel-container {
width: 80%;
margin: auto;
position: relative;
display: flex;
flex-direction: column;
gap: var(--lx-gap);

.carousel {
aspect-ratio: 16/9;
width: 100%;
position: relative;
overflow: hidden;

.item {
opacity: 0;
width: 100%;
height: 100%;
display: none;
transition: opacity 0.5s ease-in-out;

img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.caption {
width: 100%;
padding: var(--lx-space-01);
position: absolute;
bottom: 0;
text-transform: uppercase;
text-align: center;
font-size: 12px;
background-color: rgba(0, 0, 0, 0.5);
}

&.active {
opacity: 1;
display: block;
}
}
}

.btn {
padding: 1em 2em;
position: absolute;
transform: translateY(-50%);
top: 50%;
outline: none;
border: none;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
font-weight: 900;
color: #10100e;
background-color: #ffffe6;
transition: transform 0.2s ease-in-out;

&:active,
&:focus {
transform: translateY(-50%) scale(0.9);
}

&:hover {
transform: translateY(-50%) scale(0.96);
}
}

.prev {
left: -5%;
}

.next {
right:  -5%;
}
}

Код: Выделить всё

Image Slider











[img]https://images.unsplash.com/photo-1457732815361-daa98277e9c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80[/img]
Caption for Image 1

[img]https://images.unsplash.com/photo-1500206329404-5057e0aefa48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80[/img]
Caption for Image 2

[img]https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80[/img]
Caption for Image 3


Prev
Next

Изображение добавляется в контейнер карусели, но изображение не отображается в карусель
Может кто-нибудь помочь мне с этой проблемой?

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