Как реализовать такой слайдер?

Question

[2Ernest5]

По идее должен быть такой слайдер как выше. Все что находится внутри условного контейнера видно, остальное с прозрачностью, но я планирую перекрыть поверх полупрозрачными псевдоэлементами.

Вопрос в следующем: как ровно разместить элементы внутри этого визуального контейнера, чтобы внутри было ровно 4 слайда, от края до края. Пока получилось только так(если поделить ширину контейнера 4 - ширина отступов)

прикладываю ссылку на Codepen https://codepen.io/LenaGdeFotki/pen/ZEpVpqO

Answer 1

[Anonimmus]

Оочень рекомендую попробовать именно этот слайдер
https://swiperjs.com/demos/#responsive_breakpoints
https://stackblitz.com/edit/swiper-demo-37-respons...

именно в этом слайдере вы можете реализовать строгую разметку вне зависимости от экрана
задавая API, также легко добавляются и стрелочки, направления, пагинация итд.. попробуйте, рекомендую
slidesPerView: 4, // сколько слайдеров на экране
spaceBetween: 50, // расстояние между ними

Comments

[2Ernest5]

как раз таки его и использую, просто дело в том что мне нужны еще слайды по краям, а не только 4

[Rustam Bainazarov]

2Ernest5, убрать overflow: hidden у контейнера слайдера и добавить полупрозрачные псевдоэлементы, как вы и написали.

[2Ernest5]

Рустам Байназаров, благодарю!