Модификация стандартного слайдера Тильды

Всем привет! Я занимаюсь графическим дизайном. На своём сайте, соответственно, размещаю портфолио. Недавно решил, что мне будет удобнее и быстрее загружать превью работ в слайдер вместо размещения на странице «простыни» из картинок.

Поскольку мой сайт создан на Тильде, у меня есть некоторые ограничения. Дизайн стандартного слайдера не соответствовал моим требованиям: не было больших превью, прогресс-бара и возможности добавить какие-нибудь интерактивные штуковины, например такие, как в сторис.

Собственно, вот превью стандартного слайдера.

f88a2552c38.jpg

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

e0f833624e1.gif

Коротко, что сделал:

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

    Также есть ещё мысль добавить свайп в блок с превью, но для моей задачи пока что достаточно шести изображений.

    Если кто-то захочет доработать код, то пожалуйста.b6da7361f91.jpg

    Сам код довольно простой: стилизация элементов, анимации на CSS и JavaScript. Для интересующихся, код прокомментирован, можно легко разобраться, что к чему. Посмотреть, как работает в живую, можно на сайте по ссылке ниже, код с инструкцией там же.

    Посмотреть как работает слайдер

    Всем добра!
Статья опубликована пользователем. Чтобы поделиться своим проектом, написать новость или статью нажмите кнопку «Стать автором»

Интересные материалы

09 янв. 2020
1202 9

Тройка

#проекты