Как сверстать данный слайдер?

Question

[NiAomineKe]

Доброго времени суток. Помогите пожалуйста разобраться.
1) Есть ли точное определение данного блока? Т.к по запросу слайдер и карусель не смог найти ничего путного.
2) Есть ли какое-то готовое решение или библиотека с помощью которой путем css и html можно создать данный слайдер.
Я полностью понимаю как сверстать данные блоки, но совершенно не понимаю, как сделать, так чтобы не было скролла по x оси и так чтобы слайдер работал.

Comments

[Danny Arty]

А что в этом слайдере особенного? Что именно у вас не получается? Сделать так, чтобы крайний слайд обрезался?
Если так, то можно с любой библиотекой реализовать, например с помощью swiper. Указываете slidesPerView: 'auto', задаете ширину слайдов по контенту, указываете overflow-x:hidden основному контейнеру слайдера и все.

[NiAomineKe]

Danny Arty, Порекомендуйте пожалуйста наилучшие библиотеки которые подойдут.

[Danny Arty]

NiAomineKe, я же итак написал в комменте

[Сергей delphinpro]

Самый обычный слайдер. Подойдет практически любой. Например Swiper с режимом переменной ширины слайдов. По обрезку скрина не совсем ясно что там справа. Если не нужна обрезка по контейнеру, а нужна по экрану от края до края, то просто переназначить стили для контейнера слайдера и обернуть весь слайдер в блок с overwlow:hidden, чтобы страница не скроллилась по горизонтали.
В общем, любой слайдер и чутка собственных стилей.

[NiAomineKe]

Danny Arty, Большое спасибо, не увидел.

Answer 1

[Niksak]

Owl Carousel 2 неплох
Если для react то лучше react alice slider

Answer 2

[Sueta123]

Вот есть библиотека, очень гибкая по настройке https://swiperjs.com/
Взглените демо со свойством #centered-auto думаю оно точно подойдет