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

Question

[Александр Наумов]

Есть задача, нужно реализовать такой слайдер.

Не могу представить как сделать.
Может у кого есть такой пример, или подобное что то.
Желательно через slick slider.

Comments

[godsplan]

На слик такие переходы не сделаешь, я имею ввиду когда картинки друг за другом и книжкой перелистываются

[Александр Наумов]

godsplane, На чем можно попробовать такое реализовать ?

[Rustam Bainazarov]

godsplane, да можно на самом деле:
https://ru.stackoverflow.com/questions/760379/3d-%...

[godsplan]

Александр Наумов, я бы писал на js/jquery без библиотеки для слайдеров.
Если при переходе слайдов там просто затухание, то это легко

[godsplan]

Рустам Байназаров, да я тоже так делал greenpoint38.com но браузер не понимает таких вещей, поэтому такие слайдеры часто "лагают"

[godsplan]

Рустам Байназаров, хотя в ответе пример не виснет, это круто! Не знал что так можно

[Rustam Bainazarov]

godsplane, там же просто translate3d да z-index, лагать нечему. Просто это не совсем по-блатному анимируется из-за неанимируемого z-index.

Лучше, конечно, данную штуку делать, как сделали на сайте Тинькофф. Чтобы визуально нивелировать этот недостаток.

[Rustam Bainazarov]

godsplane, да не за что :))

Я таким же макаром делал для Swiper, но код искать сейчас лень.

[Rustam Bainazarov]

Александр Наумов, доработайте пример под себя:


Все благодарности сюда:
https://ru.stackoverflow.com/questions/760379/3d-%...

[Александр Наумов]

Рустам Байназаров, Спасибо большое.
Понял что лучше самому написат. Потому что этот не подходит.

[Rustam Bainazarov]

Александр Наумов, у данных слайдером кучи опций. Вы можете сделать практически любые надстройки, если владеете JS.

На сайте Tinkoff есть подобный слайдер на главной. Раньше они использовали Swiper.

Answer 1

[Жук]

jQuery Flipster
https://github.com/drien/jquery-flipster

https://codepen.io/shshaw/pen/NxWgxJ