Модификация стандартного слайдера Тильды
Денис
·
·
240
Всем привет! Я занимаюсь графическим дизайном. На своём сайте, соответственно, размещаю портфолио. Недавно решил, что мне будет удобнее и быстрее загружать превью работ в слайдер вместо размещения на странице «простыни» из картинок.
Поскольку мой сайт создан на Тильде, у меня есть некоторые ограничения. Дизайн стандартного слайдера не соответствовал моим требованиям: не было больших превью, прогресс-бара и возможности добавить какие-нибудь интерактивные штуковины, например такие, как в сторис.
Собственно, вот превью стандартного слайдера.

После чего, преисполненный энтузиазмом, создал очередные «костыли» :) Результат ниже.

Коротко, что сделал:
- Теперь есть шесть крупных превью — видно всё содержание слайдера.
Добавил прогресс-бар — понятно, когда произойдёт переключение.
- Для изображений в слайдере добавил простые анимации, которые выбираются рандомно, чтобы добавить разнообразия во время просмотра.
- Есть возможность добавлять поверх изображения что-то вроде информеров. Кстати, их довольно просто создавать в зероблоках и добавлять на слайдер через visible.
- И, конечно, есть возможность собственной стилизации элементов слайдера кодом :)
Также есть ещё мысль добавить свайп в блок с превью, но для моей задачи пока что достаточно шести изображений.
Если кто-то захочет доработать код, то пожалуйста.
Сам код довольно простой: стилизация элементов, анимации на CSS и JavaScript. Для интересующихся, код прокомментирован, можно легко разобраться, что к чему. Посмотреть, как работает в живую, можно на сайте по ссылке ниже, код с инструкцией там же.
Посмотреть как работает слайдер
Всем добра!