Всего лишь несколько строчек кода в JS оживят картинки и при клике/наведении на них будут раскрываться и, по желанию, добавлять текст.
В HTML нам понадобиться класс banner, в который будет вложен класс slideMenu и непосредственно дивы с классом slide, которых может быть любое количество. Я сразу добавила стиль для слайда, сделав фото свойством background, но это не обязательно. Таким образом мы не сможем контролировать размеры фотографии.
Код: https://codepen.io/AlinaK96/pen/oNaXxRw
Из интересного в CSS:
- баннеру задаем высоту height: 80vh, чтобы он был практически на всё окно
- для контейнера с классом slide зададим background-repeat: no-repeat, чтобы фото не дублировалось и transition: all 500ms ease-in-out для красивой анимации
- ширину для слайдов будем задавать при помощи свойства flex:
1. slide - flex: 5;
2. .slide.active - flex 8;
но эти данные можно менять чтобы делать слайды шире
JS
const slides = document.querySelectorAll('.slide') //создаём переменную
for (const slide of slides) { //для каждого дива с таким классом
slide.addEventListener('click', () => { //при клике
clearActiveClasses() //удаление всех классов
slide.classList.add('active') //будем добавлять класс 'active'
})
}
function clearActiveClasses() {
slides.forEach((slide) => { //удаляем класс 'active' с других слайдов
slide.classList.remove('active')
})
}