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

Question

[bazliiii]

Добрый день, может кто-то сталкивался либо знает как создать слайдер такого типа:


Учусь верстать дизайны, но не знаю как создать слайдер такого типа ( думаю нужно создать слайдер в 1 слайд, но width уменьшить ему до 65% например, но не получается )
Буду признателен если скинете пример в песочнице

Вот то что смог сделать в codepen
https://codepen.io/Bazli/pen/rNZKWqZ

Comments

[bazliiii]

Evgenii, добавил
https://codepen.io/Bazli/pen/rNZKWqZ

[bazliiii]

Evgenii, Если бы нашел в гугл либо codepen сюда бы не обращался, ответа на решение моей проблемы не нашел и похожих слайдеров тоже

[IIIu6ko]

bazliiii, overflow: hidden повесь на mySwiper, либо вместо класса swiper, используй swiper-container.
Ты подключил css от версии 3.3.1, а в старых версиях вместо класса swiper был swiper-container.

По сути, тебе нужен slidesPerView в auto, либо ~1.5, centeredSlides и scrollbar

Answer 1

[Danny Arty]

Судя по тегу, вы видимо хотите сделать с помощью swiper.
Если проблема с тем, чтобы были обрезаны крайние слайды, то можно указать slidesPerView: 'auto', и задать ширину одного слайда в стилях.

Comments

[bazliiii]

Основная проблема в том, что у меня был боковой сколл, а так же не получалось такое расположение слайдов ( то есть один полноценно по центру видный, и два обрезанных по бокам ). Я не против и slick slidera, просто видел в demo у swiper похожие dots ( в виде скроллбара ), поэтому и решил его использовать

[Danny Arty]

bazliiii, закиньте то, что вы пробовали со swiper в codepen и ссылку сюда, я поправлю и укажу на ошибки

[bazliiii]

Danny Arty,
Вот, но основная проблема скролл за рамки ( допустим у нас контейнер 1920px ) и если вы знаете как сделать dots как в примере можете тоже добавить их ( цвет полоски #164DA8 )
https://codepen.io/Bazli/pen/rNZKWqZ

[Danny Arty]

bazliiii, если вы читали документацию swiper, то видели, что это не dots, а scrollbar. оберните слайдер в контейнер и задайте ему overflow: hidden;

Answer 2

[Lorem Ipsum]

Я думаю Вы имеете ввиду center mode.
Example (Slick)
Example (Swiper)

Comments

[bazliiii]

Это немного не тот вариант, вот что я написал
https://codepen.io/Bazli/pen/rNZKWqZ
Но тут проблема с боковым скроллом