К основному контенту

1-5 мин

5

Zeroblock

Light

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

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

(cвернуть)
Инструкция
ВАЖНО – c момента выхода видео Тильда вносила изменения в код, которые изменили некоторые шаги в инструкции поэтому обязательно смотри текстовую инструкцию ниже
<div class="main"><div class="slider"></div></div>
<div class='sl-dots'></div>
vsl1
v-prev
vcount
v-next

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

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

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

Ты также можешь сделать вместо точек свои кнопки, которые будут листать слайдер. Для этого всё равно создай html-элемент точек как описал выше и убери его за пределы видимости в зеро. После создай кнопки которые будут листать слайды задавая им классы vsl1 для кнопки первого слайда, vsl2 для кнопки второго и тд

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

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

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

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

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

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

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

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

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

– Если у тебя наблюдаются проблемы с sbs-анимацией по ховеру, то отключи "выравнивать слайды по центральному" и "сделать слайдер беконечным"


– Всегда делай количество слайдов в сумме больше чем "количество слайдов к показу" иначе слайдеру будет нечего прокручивать


– Нумерация слайдеров идет строго по порядку и начинается с первого, причём первый слайдер на странице должен быть обязательно!


– Фон для слайдов задается через шейп. По умолчанию фон прозрачный.


– При использовании с autoscale настройка "Изменять высоту зеро по высоте слайда" применяться не будет


– При использовании с autoscale включай его ТОЛЬКО в зеро с Html-элементом слайдера, а в самих слайдах не включай, иначе скейл будет задваиваться


– Не указывай никаких значений в "отступ между слайдами", если у тебя к показу только один слайд!


– Fade-эффект будет работать только при "количество слайдов к показу" = 1. Если поставить fade эффект и слайдов к показу = 3, то будет только 1 слайд


– Если используешь выравнивание слайдов по центральному или разрешить свайп больше чем на 1 слайд, то настройка "на сколько слайдов прокручивать за шаг" не будет применяться.

Важно!

undefined
undefined
undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Поля для точек навигации
undefined
undefined
Боковые слайды
undefined
undefined
Свайп
undefined
undefined
undefined
Скопировать код
<!--Библиотека VORON--><!--Слайдер из зеро https://voron-dev.ru/zeroslide-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <style>
    .slick-disabled {
    pointer-events: none;
    opacity: 0.5;
    }
    
    .slick-slider {
      width: 100%;
      background-color: transparent;
      display: table;
      table-layout: fixed;
    }
    .sl-dots li[role="presentation"] {
      width: max-content !important;
      height: max-content !important;
    }
    .slick-dots {
        padding: 0px !important;
    }
    .action a:hover{
      background:#000;
      opacity: .85 !important;
    }
    .slick-dots li button {
      color: unset;
    }
    .slick-dots li.slick-active button::before {
      opacity: inherit;
      color: inherit;
    }
    .slick-slide:focus {
      outline: none !important;
    }
    .v-next, .v-prev {
        cursor: pointer;
    }
    .slick-dots {
        bottom: unset !important;
    }
    .slick-vertical .slick-slide {
      border: 0px !important
    }
    .slick-slider .r_hidden {
        opacity: 1 !important
    }
    
    
  li[role="presentation"][forslider="1"] {}.slick-active[role="presentation"][forslider="1"] {}
    
    .slick-slide > .t-rec, .slick-vertical > .slick-list, .slick-list.draggable {
      margin: 0px !important;
      padding: 0px !important;
  }
.slick-slide .t396__artboard {
 background-color: unset !important; 
}
.slick-slide .t396__carrier, .slick-slide .t396__filter {
  background-image: unset !important;
}
    
    
</style> <script>
t_onReady(function () {
  t_onFuncLoad('t396_init', function () {
    let zero1 = ['#rec'];
    let sld1 = $('.slider').eq(1-1);
    for (var i=0; i < zero1.length; i++) {
    sld1.append('<div' + ' number = "' + [i] + '"></div>');
    $(sld1.find('div[number="' + i + '"]')).append($(zero1[i]));
    };
sld1.slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  centerMode: false,
  centerPadding: '0px',
  speed: 1000,
  arrows: Boolean(sld1.closest('.t396__artboard').find('.v-next') || document.querySelector('.v-next1')),
  fade: false,
  dots: Boolean(sld1.closest('.t396__artboard').find('.sl-dots') || document.querySelector('.sl-dots1')),
  infinite: false,
  swipe: false,
  
  
  
  
  vertical: false,
  verticalSwiping: false,
  appendDots: sld1.closest('.t396__artboard').find('.sl-dots'),
  autoplay: false,
  swipeToSlide: false,
  
  easing: 'easeInOut',
  adaptiveHeight: false,
  nextArrow: document.querySelector('.v-next1') || sld1.closest('.t396__artboard').find('.v-next'),
  prevArrow: document.querySelector('.v-prev1') || sld1.closest('.t396__artboard').find('.v-prev'),
});
function redeclare() {
  for (var i=0; i < zero1.length; i++) {
    $(sld1.find('div[number="' + i + '"] > .t-rec')).attr('id', $(zero1[i]).attr('id'));
  };
  
}
redeclare();
$('a[data-slide]').click(function(e) {
  e.preventDefault();
  $(this).data('slide');
});

sld1.on('afterChange', function(event, slick, currentSlide, nextSlide){
  if (typeof t_lazyload_update !== "undefined") { 
    t_lazyload_update()
}
});  






  });
});
</script>
123
Примеры работы модификации
Zero Block
create your own block from scratch
Zero Block 1
create your own block from scratch
Zero Block 1
Zero Block 2
Zero Block 3
Два синхронизированных друг с другом слайдера, в которые можно загрузить фотографии, т.к. оба листают зероблоки.
С кастомными стрелками и перелистыванию по свайпу. Для нижнего включено "листать слайдер по клику на слайд"
Tilda Publishing
Zero Block 1
Полноэкранный слайдер из зероблок, со стандартными точками навигации
Tilda Publishing
create your own block from scratch
Zero Block 1
Tilda Publishing
create your own block from scratch
Тот же полноэкранный слайдер, но с fade-эффектом перелистывания
Zero Block 1
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!
Tilda Publishing
Zero Block 1
Полноэкранный слайдер из зероблок, со стандартными точками навигации и включенной совместимостью с Autoscale
Tilda Publishing
create your own block from scratch
Zero Block
create your own block from scratch
Zero Block 1
create your own block from scratch
Zero Block 1
Zero Block 2
Zero Block 3
Два синхронизированных друг с другом слайдера, с включенным автоперелистыванием и совместимостью с Autoscale. В нижнем включено "разрешить свайп больше чем на 1 слайд"
Zero Block
create your own block from scratch
Zero Block 1
create your own block from scratch
Zero Block 1
Zero Block 2
Zero Block 3
Два синхронизированных друг с другом слайдера, с включенным автоперелистыванием, "разрешить свайп больше чем на 1 слайд", счётчиком слайдов и затемнением боковых слайдов в нижнем слайдере
1
/4
Tilda Publishing
550 px
Полноэкранный слайдер из зероблок, с включенным изменением зеро по высоте
(Используй осторожно, лучше выключи автоплей, чтобы высота страницы не менялась и делай размер слайдера по самому большому слайду)