Coral_Reef
@Coral_Reef
Javascript developer

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

Подскажите, как лучше сверстать такой слайдер: Видео демонстрация
Суть:
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, почему-то такой вариант не работает), поместил статичную картинку и это заработало, статичная картинка оказалась между текстами и слайдами. Но в как придать эти интересные деформации при смене слайдов?
  • Вопрос задан
  • 711 просмотров
Решения вопроса 1
RAX7
@RAX7
за основу возьми слайдер из этой статьи https://medium.com/better-programming/webgl-enhanc...
и допили под собственные нужды
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08 Куратор тега CSS
Фоновая картинка и текст живую отдельно друг от другая. При свайпе текста, он трансформируется наклоняясь. На первой половине пути, у текущего слайда постепенно уменьшается border-radius до 0, а начиная с середины пути, у следующего он увеличивается, до нужного значения. Далее надо будет сместить слайды так, что не было видно дыр на краях сверху и снизу, причем смещать надо будет постепенно на длину изгиба. Потом придется играться с z-index таким образом, чтоб он переключался в нужный момент так, чтоб на переднем плане был тот слайд, у которого border-radius > 0. Собственно на css больше ничего не сделать. Решение довольно хреновое, результат тоже будет хреновый. Так как подобные слайды делаются не на свайпере и ему подобных, а на THREE.js и glsl, потому что только тогда результат будет именно таким, какой он на видео, такой-же плавный, такой-же четкий, без гличей и невтемных левых вылезающих пикселей.
Ответ написан
iamd503
@iamd503
Верстальщик
nomorehero
@nomorehero
Не пойму в чём проблема статичной картинки, обычный псевдоэлемент к слайдеру на абсолюте внизу
Деформация очень сильно отдаёт borer-radius'ом, поиграйся с ним, судя по всему он придаётся новому элементу, на фоне старого и потом расслабляется при смене.
Думаю, пару сотен попыток и всё получится.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы