Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как в слайдере CR30N сделать полоски с автозаполнением вместо точек Tilda

Как в слайдере CR30N сделать полоски с автозаполнением вместо точек Tilda

1
Создали блок CR30N и задали ему класс uc-slider-line
2
Вставили код в блок Другое - Т123
Библиотека для примера

<style>

.uc-slider-line .t-slds__bullet_active .t-slds__bullet_body.fill-mode:after {
    transition: all var(--timing-slider) ease-in-out; 
    width: 100%;
}

.uc-slider-line .t-slds__bullet_wrapper {
    display: flex !important;
    box-sizing: border-box;
}
.uc-slider-line .t-slds__bullet {
    width: 100%;
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.uc-slider-line .t-slds__bullet_body {
    height: 6px !important;
    width: inherit !important;
    border-radius: 0;
}  


.uc-slider-line .t-slds__bullet {
    position: relative;
}

.uc-slider-line .t-slds__bullet_body:after {
    content: "";
    width: 0%;
    height: 100%;
    background: #fff;
    display: block;
}

.uc-slider-line  .t-slds__bullet_wrapper {
    bottom: 30px;
}

.uc-slider-line .t-slds__bullet_body {
    border: none !important;
    background-color: rgb(255 255 255 / 15%) !important;
}

#allrecords .uc-slider-line  .t-slds__bullet_active .t-slds__bullet_body {
 background-color: rgb(255 255 255 / 15%) !important;
}

#allrecords .uc-slider-line  ul.t-slds__bullet_wrapper {
 padding-left: 30px !important;
 padding-right: 30px !important;
}

.uc-slider-line li.t-slds__bullet {
    padding: 10px 5px;
}    

.uc-slider-line ul.t-slds__bullet_wrapper {
    opacity: 1;
}

.uc-slider-line ul.t-slds__bullet_wrapper.show-mode {
    opacity: 1;
}

</style>


<script>
document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function(){
        //Добавляем класс к слайдеру
        document.querySelectorAll('.uc-slider-line .t-slds__bullet_body').forEach((element) => element.classList.add('fill-mode'));
        //Получаем тайминг автослайдинга
        let timing = document.querySelector('.uc-slider-line .t-slds__items-wrapper').getAttribute('data-slider-timeout');
        //Добавляем тайминг в полоски
        document.body.style.setProperty("--timing-slider", timing+"ms");
        //Разрешаем автослайдинг при наведении
        document.querySelector('.t-slds__items-wrapper').addEventListener('mouseover', function() {
            setTimeout(function(){
                document.querySelector('.t-slds__items-wrapper').setAttribute('data-slider-stopped', '');
            }, 100); 
        });
    
    }, 1000);
    
});
</script>
Made on
Tilda