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

1. Добавь в зероблок, где хочешь сделать слайдер, html-код и в него вставь:



Внутри блока с этим кодом и будут листаться слайды, поэтому задай ему размеры слайда и адаптируй под все разрешения как обычный шейп. Если тебе нужно чтобы слайдер выходил за пределы экрана, то просто сделай чтобы этот html-элемент выходил за края в zeroblock

2. Если будешь делать точки навигации, то добавь второй html-код и в него вставь:



Внутри блока с этим кодом будут точки, поставь их куда нужно в зеро и адаптируй под все разрешения как обычный шейп

3. Если будешь делать свои стрелки переключения, то задай css класс v-prev для стрелки назад и v-next для стрелки вперед

4. Если будешь делать счётчик слайдов, то создай текстовый блок и задай ему css класс vcount (Также обязательно оставь пункт показывать точки навигации включенным. Если они тебе не нужны, то просто не создавай для них html-элемент)

5. Размести внизу страницы все остальные зероблоки, которые будут слайдами (их ширина в слайдере будет равна ширине html-элемента слайдера, деленая на количество показываемых слайдов)

6. Если у тебя слайдер с autoscale или не на весь зероблок (100% по ширине по window container), а лишь на его часть, то задай элементам в слайдах выравнивание window-relative top-left. А также убери для контента отступы слева и сверху, чтобы слайды были прижаты вбок вот так. Иначе все сместится вправо! Просто нажми выдели все элементы и сделай всё как во второй подсказке

7. Укажи rec-id всех зероблоков (или стандартных блоков), которые должны быть слайдами через запятую и пробел (без кавычек!)

8. Если будешь использовать автоскейл, то включи его только в самом зеро, в котором у тебя будет слайдер

9. Выбери все нужные тебе функции в генераторе кода и в дополнительных настройках и полученный код вставь в блок т123 сразу после последнего слайда

10. Если хочешь вставить на страницу 2-й и последующие слайдеры, то укажи в генераторе кода порядковый номер слайдера, чтобы отвязать его от остальных и повтори пункты 1-10 "Подключить jQuery на страницах сайта"

11. После всех этих действий перейди в Настройки сайта => Ещё => Выбери пункт "Подключить jQuery на страницах сайта"

Инструкция

Важно!

- Если у тебя наблюдаются проблемы с sbs-анимацией по ховеру, то отключи "выравнивать слайды по центральному" и "сделать слайдер беконечным"
- Всегда делай количество слайдов в сумме больше чем "количество слайдов к показу" иначе слайдеру будет нечего прокручивать
- Нумерация слайдеров идет строго по порядку и начинается с первого, причём первый слайдер на странице должен быть обязательно!
- Фон для слайдов задается через шейп. По умолчанию фон прозрачный.
- При использовании с autoscale настройка "Изменять высоту зеро по высоте слайда" применяться не будет
- Не указывай никаких значений в "отступ между слайдами", если у тебя к показу только один слайд!
- Fade-эффект будет работать только при "количество слайдов к показу" = 1. Если поставить fade эффект и слайдов к показу = 3, то будет только 1 слайд
- Если используешь выравнивание слайдов по центральному или разрешить свайп больше чем на 1 слайд, то настройка "на сколько слайдов прокручивать за шаг" не будет применяться.

(Развернуть)

Zero Block

create your own block from scratch

Zero Block 1

create your own block from scratch

Zero Block 2

create your own block from scratch

Zero Block 3

create your own block from scratch

Zero Block 4

create your own block from scratch

Zero Block 1

Zero Block 2

Zero Block 3

Zero Block 4

Tilda Publishing

Zero Block 1

Полноэкранный слайдер из зероблок, со стандартными точками навигации

Tilda Publishing

create your own block from scratch

Zero Block 2

Tilda Publishing

create your own block from scratch

Полноэкранный слайдер из зероблок, со стандартными точками навигации

Zero Block 3

Tilda Publishing

create your own block from scratch

Полноэкранный слайдер из зероблок, со стандартными точками навигации

Zero Block 1

Tilda Publishing

create your own block from scratch

Тот же полноэкранный слайдер, но с fade-эффектом перелистывания

Zero Block 2

create your own block from scratch

Тот же полноэкранный слайдер, но с fade-эффектом перелистывания

Zero Block 3

Tilda Publishing

create your own block from scratch

Тот же полноэкранный слайдер, но с fade-эффектом перелистывания

Zero Block 1

Tilda Publishing

create your own block from scratch

Тот же полноэкранный слайдер, но с вертикальным режимом перелистывания и вертикальным свайпом

Zero Block 2

Tilda Publishing

create your own block from scratch

Тот же полноэкранный слайдер, но с вертикальным режимом перелистывания и вертикальным свайпом

Zero Block 3

Tilda Publishing

create your own block from scratch

Тот же полноэкранный слайдер, но с вертикальным режимом перелистывания и вертикальным свайпом

create your own block from scratch

Zero Block

LET'S GO!

create your own block from scratch

Zero Block

LET'S GO!

create your own block from scratch

Zero Block

LET'S GO!

create your own block from scratch

Zero Block

LET'S GO!

create your own block from scratch

Zero Block

LET'S GO!

create your own block from scratch

Zero Block

LET'S GO!

create your own block from scratch

Zero Block

LET'S GO!

create your own block from scratch

Zero Block

LET'S GO!

Tilda Publishing

Zero Block 1

Полноэкранный слайдер из зероблок, со стандартными точками навигации и включенной совместимостью с Autoscale

Tilda Publishing

create your own block from scratch

Zero Block 2

Полноэкранный слайдер из зероблок, со стандартными точками навигации и включенной совместимостью с Autoscale

Tilda Publishing

create your own block from scratch

Zero Block 3

Полноэкранный слайдер из зероблок, со стандартными точками навигации и включенной совместимостью с Autoscale

Tilda Publishing

create your own block from scratch

Два синхронизированных друг с другом слайдера, с включенным автоперелистыванием и совместимостью с Autoscale. В нижнем включено "разрешить свайп больше чем на 1 слайд"

Zero Block

create your own block from scratch

Zero Block 1

create your own block from scratch

Zero Block

create your own block from scratch

Zero Block 2

create your own block from scratch

Zero Block

create your own block from scratch

Zero Block 3

create your own block from scratch

Zero Block

create your own block from scratch

Zero Block 4

create your own block from scratch

Zero Block 1

Zero Block 2

Zero Block 3

Zero Block 4

Два синхронизированных друг с другом слайдера, с включенным автоперелистыванием, "разрешить свайп больше чем на 1 слайд", счётчиком слайдов и затемнением боковых слайдов в нижнем слайдере

/4

Zero Block

create your own block from scratch

Zero Block 1

create your own block from scratch

Zero Block

create your own block from scratch

Zero Block 2

create your own block from scratch

Zero Block

create your own block from scratch

Zero Block 3

create your own block from scratch

Zero Block

create your own block from scratch

Zero Block 4

create your own block from scratch

Zero Block 1

Zero Block 2

Zero Block 3

Zero Block 4

Tilda Publishing

550 px

Полноэкранный слайдер из зероблок, с включенным изменением зеро по высоте
(Используй осторожно, лучше выключи автоплей, чтобы высота страницы не менялась и делай размер слайдера по самому большому слайду)

330 px

Полноэкранный слайдер из зероблок, с включенным изменением зеро по высоте
(Используй осторожно, лучше выключи автоплей, чтобы высота страницы не менялась и делай размер слайдера по самому большому слайду)

770 px

Полноэкранный слайдер из зероблок, с включенным изменением зеро по высоте
(Используй осторожно, лучше выключи автоплей, чтобы высота страницы не менялась и делай размер слайдера по самому большому слайду)

Слайдер с уменьшением боковых слайдов

Сделай обычный слайдер по инструкции, но выбери в настройках "уменьшать боковые слайды", укажи id зероблока с html-элементом слайдера и укажи насколько нужно уменьшать боковые слайды и скорость уменьшения