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

Этот скрипт позволит тебе сделать любое количество многофункциональных и независимых друг от друга слайдеров как из зероблок, так и из стандартных блоков на одной странице. Модификация совместима с Autoscale.Пример работы модификации внизу cтраницы

Видео-инструкция

1-5 мин.
JavaScript
Слайдер

Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓

!

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



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

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



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

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

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

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

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

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

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

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

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

- Нумерация слайдеров идет строго по порядку и начинается с первого, причём первый слайдер на странице должен быть обязательно!
- Фон для слайдов задается через шейп. По умолчанию фон прозрачный.
- При использовании с autoscale настройка "Изменять высоту зеро по высоте слайда" применяться не будет
- Не указывай никаких значений в "отступ между слайдами", если у тебя к показу только один слайд!
- Fade-эффект будет работать только при "количество слайдов к показу" = 1. Если поставить fade эффект и слайдов к показу = 3, то будет только 1 слайд
- Если используешь выравнивание слайдов по центральному или разрешить свайп больше чем на 1 слайд, то настройка "на сколько слайдов прокручивать за шаг" не будет применяться.
(Развернуть)
undefined
undefined
Скопировать
<div class="main"><div class="slider"></div></div>
<div class='sl-dots'></div>
Скопировать
undefined
Отчистить поля
(Дополнительные настройки)
Скопировать код


123
Примеры работы модификации
Два синхронизированных друг с другом слайдера, в которые можно загрузить фотографии, т.к. оба листают зероблоки.
С кастомными стрелками и перелистыванию по свайпу. Для нижнего включено "листать слайдер по клику на слайд"
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 слайд", счётчиком слайдов и затемнением боковых слайдов в нижнем слайдере
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-элементом слайдера и укажи насколько нужно уменьшать боковые слайды и скорость уменьшения

Опиши нужный функционал через эту форму и он будет добавлен!

Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности
Не хватает какой-то функции?