Как сделать такой swiper, где активный слайд больше остальных?

Question

[speculant]

Здравствуйте, как можно сделать подобный слайдер, что бы активный был больше остальных.

Сейчас из за того что я поставил slidesPerView: 1, и снял overflow: hidden с свайпера, выглядит так как нужно. Но когда включен loop, то есть баг, что последний слайд начинает пропадать.

Answer 1

[Danny Arty]

Comments

[speculant]

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

[Danny Arty]

speculant, я и не собирался делать 1 в 1, это ведь не биржа фриланса. Я вам просто кинул пример, который был у меня в codepen. За основу можете взять его и легко сделать так, чтобы отображались не все, а только 3 слайда, в чем проблема то поменять всего одну строчку?

[speculant]

Danny Arty, ты просто кинул свой пример, который даже не связан с вопросом, какой в нем смысл?

> в чем проблема то поменять всего одну строчку?
какую строчку?)) если пример абсолютно мимо

[Danny Arty]

speculant,

ты просто кинул свой пример, который даже не связан с вопросом, какой в нем смысл?

Ваш вопрос - как сделать такой swiper, где активный слайд больше остальных?
Мой пример - swiper слайдер, где активный больше остальных, просто вместо 3 показывались все.

какую строчку?)) если пример абсолютно мимо

slidesPerView нужно указать что-то наподобие 1.5 и дальше стилизация под ваши нужны. Советую почитать доки и все станет понятно

[speculant]

Ваш вопрос - как сделать такой swiper, где активный слайд больше остальных?

да, и в примере я показал насколько большой должна быть разница между слайдами, основной слайд почти на всю страницу (и остальные два слайда должны быть видны олностью), в этом и есть основная сложность, потому что как я понял свайпер не позволяет так сделать. Я смог добиться такого эффекта только чрез "хак", отобразив только один слайд, а остальные показал убрав overflow: hidden;

slidesPerView нужно указать что-то наподобие 1.5 и дальше стилизация под ваши нужны.

остальные два слайда тоже должны быть видно полностью, просто должны быть маленькие, поэтому 1.5 не подойдет. И если сделать slidesPerView 3, то тогда не получится сделать нужные размеры, потому что остальные слайды съедят размер активного.

[speculant]

Нашел решение проблемы с багом при включенном loop. Нужно было просто для предыдущего и следующего дубликатов тоже добавить трансфрм ориджин.

.swiper-slide-next,
 .swiper-slide-duplicate-next {
    transform-origin: 0% 86%;
  }

  .swiper-slide-prev,
 .swiper-slide-duplicate-prev {
    transform-origin: 100% 86%;
  }