Как добавить кнопку информации в функцию карусели, чтобы она расширилась должным образом? ⇐ Javascript

[Anonymous]

Вот что я пытаюсь сделать. У меня есть карусель с семью изображениями внутри нее. Для каждого изображения я хочу добавить кнопку информации. Когда пользователь просматривает одно из изображений, а затем нажимает кнопку «Информация», расположенная в области корпуса просмотра, я хочу, чтобы расширяемый раздел открывал и нажимал или сгибал сгибание изображения и навигационные кнопки в сторону, чтобы зритель мог видеть как одно изображение, так и информация в расширяемой разделе одновременно. Сначала я закодировал функцию карусели, и теперь я хочу добавить к ней кнопку информации/ расширяемой функции. Прямо сейчас, когда я запускаю код (см. Ниже) и нажимаю кнопку «Информация», расширяемый раздел открывается и охватывает навигационные кнопки, а изображение на карусели не проскользнут, чтобы приспособить ширину расширяемого раздела и текста. Пожалуйста, помогите, если у вас есть время. Спасибо! < /P>

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

/*Carousel*/
const buttons = document.querySelectorAll("[data-carousel-button]")

buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")

const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length - 1
if (newIndex >= slides.children.length) newIndex = 0

slides.children[newIndex].dataset.active = true
delete activeSlide.dataset.active
})
})< /code>
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
}

/*Carousel*/
.carousel > ul {
margin: 0;
padding: 0;
list-style: none;
}

.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}

.slide > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.slide[data-active] {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}

.carousel-button {
position: absolute;
z-index: 2;
background: none;
border: none;
font-size: 4rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, .5);
cursor: pointer;
border-radius: .25rem;
padding: 0 .5rem;
background-color: rgba(0, 0, 0, .1);
}

.carousel-button:hover,
.carousel-button:focus {
color: white;
background-color: rgba(0, 0, 0, .2);
}

.carousel-button:focus {
outline: 1px solid black;
}

.carousel-button.prev {
left: 1rem;
}

.carousel-button.next {
right: 1rem;
}

/*Info Button*/
.wrapper {
display: flex;
height: 100vh;
width: 100vw;
position: relative;
}

.main {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
z-index: 888;
}

.side-panel-toggle {
width: 40px;
height: 40px;
flex-shrink: 0;
display: grid;
place-items: center;
z-index: 999;
color: black;
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
transition: transform 0.75s ease-in-in;
}

.side-panel-toggle:hover {
color: #007960;

}

.sp-icon-close {
display: none !important;

}

.side-panel {
z-index: 999;
display: none;
width: 400px;
flex-shrink: 0;
padding: 20px;
color: #ffffff;
background: tan;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);

}

.side-panel-open .side-panel {
display: initial;

}

.side-panel-open .sp-icon-open {
display: none !important;

}

.side-panel-open .sp-icon-close {
display: initial !important;

}
.content{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;

}< /code>





 Carousel and Info Button 
[*]










⇐
⇒
[list]


[img]https://placehold.co/600x400?text=image_1.jpg[/img]

[*]
[img]https://placehold.co/600x400?text=image_2.jpg[/img]

[*]
[img]https://placehold.co/600x400?text=image_3.jpg[/img]

[/list]







info


info



Image One
This is my image




document.querySelector(".side-panel-toggle").addEventListener("click", () => {
document.querySelector(".wrapper").classList.toggle("side-panel-open");
});

Подробнее здесь: https://stackoverflow.com/questions/797 ... s-properly