Ползунок Swiper с тенью коробки ⇐ Javascript

[Anonymous]

У меня есть проблема с Swiperjs Slider-я хотел бы добавить для каждого элемента в виде коробки. Содержимое.

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

document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".comp-gallery").forEach(function(el) {
const gallerySwiperEl = el.querySelector(".comp-gallery-swiper");

const gallerySwiperConfig = {
loop: true,
slidesPerView: 1,
spaceBetween: 30,
navigation: {
nextEl: el
.closest(".comp-gallery")
.querySelector(".pd-slider-arrow--right"),
prevEl: el
.closest(".comp-gallery")
.querySelector(".pd-slider-arrow--left")
}
};

const gallerySwiper = new Swiper(gallerySwiperEl, gallerySwiperConfig);
});
});< /code>
.comp-gallery {
display: flex;
align-items: center;
gap: 30px;
width: 500px;
}

.comp-gallery-swiper {
// overflow: visible;
}

.comp-gallery__item {
box-shadow: 0px 0px 40px 10px rgb(255 0 0 / 0.8);
}

.comp-gallery__image {
width: 100%;
border-radius: 22px;
}< /code>




←




[img]https://placehold.co/600x400/000/fff/png?text=image-1[/img]

[img]https://placehold.co/600x400/00ff00/fff/png?text=image-2[/img]

[img]https://placehold.co/600x400/00ffff/fff/png?text=image-3[/img]





→

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