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

Question

[Viacheslav Gordeiko]

Подскажите, как лучше сверстать такой слайдер: Видео демонстрация
Суть:
1. статичная картинка между текстом и слайдами
2. интересное искажение текстов и слайдов.

Что пробовал:
1 . с помощью swiperjs создал слайдер и добавил статичную картинку, пробовал с помощью z-index разместить картинку между - не вышло, статичная картинка всегда сверху, при любом z-index :(
2. с помощью старой версии swiperjs создал два слайдера: с картинками и текстом, синхронизировал их с помощью

var titleSwiper = new Swiper('.title-slider', {
    loop: true,
  });

  var imageSwiper = new Swiper('.image-slider', {
    loop: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
  });

  titleSwiper.params.control = imageSwiper;
  imageSwiper.params.control = titleSwiper;

(в последней версии swiperjs, почему-то такой вариант не работает), поместил статичную картинку и это заработало, статичная картинка оказалась между текстами и слайдами. Но в как придать эти интересные деформации при смене слайдов?

Answer 1

[RAX7]

за основу возьми слайдер из этой статьи https://medium.com/better-programming/webgl-enhanc...
и допили под собственные нужды

Comments

[Viacheslav Gordeiko]

То что нужно! Спасибо!

Answer 2

[profesor08]

Фоновая картинка и текст живую отдельно друг от другая. При свайпе текста, он трансформируется наклоняясь. На первой половине пути, у текущего слайда постепенно уменьшается border-radius до 0, а начиная с середины пути, у следующего он увеличивается, до нужного значения. Далее надо будет сместить слайды так, что не было видно дыр на краях сверху и снизу, причем смещать надо будет постепенно на длину изгиба. Потом придется играться с z-index таким образом, чтоб он переключался в нужный момент так, чтоб на переднем плане был тот слайд, у которого border-radius > 0. Собственно на css больше ничего не сделать. Решение довольно хреновое, результат тоже будет хреновый. Так как подобные слайды делаются не на свайпере и ему подобных, а на THREE.js и glsl, потому что только тогда результат будет именно таким, какой он на видео, такой-же плавный, такой-же четкий, без гличей и невтемных левых вылезающих пикселей.

Answer 3

[Евгений]

Тык

Comments

[Viacheslav Gordeiko]

Ну это разные вещи, в Паралаксе одна картинка под всеми слайдами. Как паралакс может сделать то, что я привел в ссылке?
По ссылке видно, что свайпается и текст и картинка вместе.