Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
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, содержимое слайдера будет обрезаться по этой рамке. При публикации рамка будет скрыта.
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, содержимое слайдера будет обрезаться по этой рамке. При публикации рамка будет скрыта.
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, содержимое слайдера будет обрезаться по этой рамке. При публикации рамка будет скрыта.
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, содержимое слайдера будет обрезаться по этой рамке. При публикации рамка будет скрыта.
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch