1
/
1
Скрипт слайдера (карусели)
СКРИПТ
- Создайте карточки для слайдера, для этого объедините содержимое карточек в группы типа Object.
- Задайте каждой карточке класс slide
- Объедините все карточки в одну группу типа Object и задайте ей свойство Autolayout и присвойте класс tf_slider
- Настройте gap (расстояние между карточками) и ширину видимой части слайдера tf_slider (красная рамка). Сколько карточек попадет в эту ширину, столько и будет одновременно видимы.
- За счет изменения ширины tf_slider вы можете настроить разное количество карточек на разных брейкпоинтах.
- Задайте классы для кнопок слайдера: для кнопки «назад» tf_slider-prev, для кнопки «вперед» tf_slider-next
- Для счетчика текущей страницы слайдера задайте класс у текстового поля tf_current, для счетчика общего количества страниц задайте класс tf_total
- Добавьте точки (страницы), присвойте им класс dot
- Объедините точки в общую группу, задайте ей свойство Autolayout
- Все элементы навигации можно располагать в разных частях экрана, или удалить, если не нужны (оставить только стрелки)
- Если в одном Зероблоке больше чем один слайдер, последующим слайдерам задавайте имя
- Слайдер: tf_slider-1
- Кнопки: tf_slider-prev-1, tf_slider-next-1
- Точки: tf_slider-dots-1
- Счетчики: tf_current-1, tf_total-1
- Для второго/третьего слайдера: tf_slider-2, tf_slider-3 и т.д.
Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию и подсказки удалить
Страницы (точки), укажите их стиль в настройках в HTML слайдера:
- 1 — basic. Базовый стиль – для Shape меняется прозрачность точки. Если задать точку с помощью Button можно гибко настроить вид неактивной и активной точки (состояние Hover кнопки). Если задать в кнопке цифру - включится автоматическая нумерация страниц.
- 2 — capsule. Капсула – точка текущей страницы отличается по ширине и прозрачности. Поддерживается Shape и Button
- 3 — custom. Свой стиль. Нарисуйте две точки рядом и задайте им стиль dot. Первая точка – неактивная, вторая точка – текущая. Если у вас сложная точка, объедините все элементы точки в одну группу и задайте группе класс dot.
Красная рамка — область слайдера, сколько карточек попадает в нее, столько и будет одновременно видно в режимах fade, grow, space. Можно менять количество видимых карточек на разных брейкпоинтах. Если задать этому контейнеру (tf_slider) параметр overlow hidden, содержимое слайдера будет обрезаться по этой рамке. При публикации рамка будет скрыта.