Contacts
Follow us

Как сделать кнопки управления стандартным слайдером в ZeroBlock в Tilda

1
Создали блок CR30N. Назначили управление - стрелки и точки
В настройках задали ему класс uc-slider-control
2
Создали ZeroBlock с нулевой высотой и режимом overflow-visible
Вылет элементов сделали вверх
3
Создали 2 иконки со стрелочками и задали им классы
z-arrow-left и z-arrow-right
4
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём кнопки в ZeroBlock для управления штатным слайдером CR30N
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function(){
(function () {
    let leftArrowZero = document.querySelectorAll('.z-arrow-left')[0];
    let rightArrowZero = document.querySelectorAll('.z-arrow-right')[0];
    let leftArrow = document.querySelectorAll('.uc-slider-control .t-slds__arrow-left')[0];
    let rightArrow = document.querySelectorAll('.uc-slider-control .t-slds__arrow-right')[0];
    leftArrowZero.addEventListener( 'click' , function() {  leftArrow.click()});
    rightArrowZero.addEventListener( 'click' , function() {  rightArrow.click()});
})();
});
</script>


<style>
.uc-slider-control .t-slds__arrow_wrapper{display: none !important}  
.z-arrow-left, .z-arrow-right {cursor: pointer}
</style>
Библиотека для примера
Стили из этого примера

<style>
.uc-slider-control .t-slds__bullet_wrapper {
    padding: 0;
    right: auto;
    width: fit-content;
    bottom: auto;
    top: 0;
    display: flex;
    flex-direction:column;
    height: 100%;
}
.uc-slider-control .t-slds__bullet {
    display: block;
    height: 100%;
    padding: 0;
}
.uc-slider-control .t-slds__bullet_body {
    width: 3px !important;
    height: 100% !important;
    border-radius: 0;
    border: none !important;
    background-color: rgb(255 255 255 / 30%) !important;
    transition: all 0.7s ease-in-out;
}    
.uc-slider-control  .t-slds__bullet_active .t-slds__bullet_body {
    width: 6px !important;
}
.t734__title div {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
    color: transparent !important;
    font-size: 100px !important;
}    
</style>
Made on
Tilda