Как сделать чтобы при наведении на элемент слайда он увеличивался, а остальные видимые элементы уменьшались?

Question

[veroni1337]

Здравствуйте. Пытаюсь сделать карусель, который при наведении на слайд будет его увеличивать по ширине а остальные уменьшать. https://imgur.com/a/S13FBof вот скрин дизайна слайдера (не смог по какой то причине напрямую добавить скрин). Не смог в интернете найти такой же слайдер, чтобы посмотреть как они это реализовали.
https://aliserb.github.io/liya/ вот как я его реализовал, но то что я сделал мне не нравится, потому что в консоли браузера выходят ошибки которых я не понимаю как исправить) и появляются проблемы при адаптиве этого слайдера.
По сути я сделал так, чтобы при наведении на слайд выдается ширина 212px для слайдов которые в зоне видимости и имеют класс swiper-slide-visible и ширина 100% когда курсор уходит. Дальше в css добавил hover и 566px ширины.

let aboutSliderItem = document.querySelectorAll('.about_slider_item');

aboutSliderItem.forEach((aboutSliderLoop) => {
    // let itemPar = querySelector(".about_info .p");
    let sliderWidthReduce = () => {
        for (let i = 0; aboutSliderItem.length; i++) {
            if (aboutSliderItem[i].classList.contains("swiper-slide-visible")) {
                aboutSliderItem[i].style.width = "212px";
            }
        }
    }

    let sliderWidthreturn = () => {
        for (let i = 0; aboutSliderItem.length; i++) {
            aboutSliderItem[i].style.width = "100%";
        }
    }

    aboutSliderLoop.addEventListener('mouseover', sliderWidthReduce);
    aboutSliderLoop.addEventListener('mouseout', sliderWidthreturn);
})

Как можно сделать этот слайдер лучше и адаптивным))

Comments

[veroni1337]

и еще прошу оценить насколько сильно я наговнокодил)

Answer 1

[veroni1337]

вот решение с помощью css
код: https://github.com/Aliserb/adaptive_carousel_swiper.git
демонстрация: https://aliserb.github.io/adaptive_carousel_swiper/