URL скопирован в буфер обмена!
Как сделать слайдер До/После в Zero Block?
С помощью данной модификации можно добавить в Zero Block слайдер До После со своими картинками. Дополнительно можно настроить обводку, скруглить углы и изменить цвет элементов управления. Слайдер работает на мобилках и легко адаптируется.
Модификация обновлена. Слайдер теперь работает в блоках в с включённым автоскейлом
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс слайдера
Ссылка на картинку слева
Ссылка на картинку справа
Цвет линии и ползунка
Толщина линии и ползунка
Радиус скругления углов слайдера
Цвет обводки слайдера
Толщина обводки слайдера
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD055--><div class="Ticode-ba-containerslider">
<div class="TiCode-ba-sliderslider" id="Ticode-BAslider">
<div class="TiCode-Ba-beforeslider">
<img src="" alt="">
</div>
<div class="after">
<img src="" alt="">
</div>
<div class="TiCode-ba-changeslider">
<div class="slider-rectangle"></div>
</div>
</div>
</div>
<style>
.Ticode-ba-containerslider {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.TiCode-ba-sliderslider {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.ti-imgslider {
overflow: hidden;
border: 0px solid ;
border-radius: 0px;
}
.TiCode-Ba-beforeslider, .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.TiCode-Ba-beforeslider img, .after img {
width: 100%;
height: 100%;
object-fit: cover;
}
.TiCode-Ba-beforeslider {
z-index: 2;
clip-path: inset(0 50% 0 0);
}
.after {
z-index: 1;
clip-path: inset(0 0 0 50%);
}
.TiCode-ba-changeslider {
position: absolute;
left: 50%;
top: 0;
z-index: 10;
width: 2px;
height: 100%;
background-color: #F96855;
cursor: col-resize;
}
.TiCode-ba-changeslider::before, .TiCode-ba-changeslider::after {
content: "";
position: absolute;
top: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 6px 8px 6px;
transform: translateY(-50%);
}
.TiCode-ba-changeslider::before {
left: -20px;
border-color: transparent #F96855 transparent transparent;
}
.TiCode-ba-changeslider::after {
right: -20px;
border-color: transparent transparent transparent #F96855;
}
.TiCode-ba-changeslider .slider-rectangle {
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 35px;
background-color: #F96855;
transform: translate(-50%, -50%);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const containerSlider = document.querySelector('.Ticode-ba-containerslider');
const beforeSlider = containerSlider.querySelector('.TiCode-Ba-beforeslider img');
const afterSlider = containerSlider.querySelector('.after img');
const TiBaSliderslider = document.getElementById('Ticode-BAslider');
const Tibeforeslider = TiBaSliderslider.querySelector('.TiCode-Ba-beforeslider');
const Tichangeslider = TiBaSliderslider.querySelector('.TiCode-ba-changeslider');
let isActiveslider = false;
function updateImageSize() {
const rect = containerSlider.getBoundingClientRect();
beforeSlider.style.width = `${rect.width}px`;
beforeSlider.style.height = `${rect.height}px`;
afterSlider.style.width = `${rect.width}px`;
afterSlider.style.height = `${rect.height}px`;
}
function updateClipPath(x) {
const rect = TiBaSliderslider.getBoundingClientRect();
let percentage = ((x - rect.left) / rect.width) * 100;
percentage = Math.max(0, Math.min(100, percentage));
Tibeforeslider.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
document.querySelector('.after').style.clipPath = `inset(0 0 0 ${percentage}%)`;
Tichangeslider.style.left = `${percentage}%`;
}
function moveSlider(e) {
if (!isActiveslider) return;
const x = e.touches ? e.touches[0].clientX : e.clientX;
updateClipPath(x);
}
function initializeSlider() {
window.addEventListener('resize', updateImageSize);
updateImageSize();
Tichangeslider.addEventListener('mousedown', () => { isActiveslider = true; });
document.addEventListener('mouseup', () => { isActiveslider = false; });
document.addEventListener('mousemove', moveSlider);
Tichangeslider.addEventListener('touchstart', () => { isActiveslider = true; });
document.addEventListener('touchend', () => { isActiveslider = false; });
document.addEventListener('touchmove', moveSlider);
}
initializeSlider();
});
</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем блок GL02 и загружаем в него две картинки(лучше чтобы у картинок был одинаковый размер). Копируем ссылки картинок и вставляем в генератор кода в поля "Ссылка на картинку слева" и "Ссылка на картинку справа". Блок GL02 скрываем, кликнув на глаз. Блок нельзя удалять!
2. Добавляем Zero BLock, создаем внутри блока html контейнер и присваиваем ему класс ti-imgslider
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. При необходимости указываем дополнительные настройки в генераторе кода:
Цвет линии ползунка - указываем цвет для разделяющей линии;
Толщина линии ползунка - указываем толщину разделяющей линии;
Радиус скругления углов - указываем радиус скругления углов слайдера;
Цвет обводки слайдера - указываем цвет обводки слайдера;
Толщина обводки слайдера - указываем толщину обводки слайдера;
4. Копируем готовый код и вставляем в html контейнер, который мы создали в Zero Block. Для адаптации достаточно изменить размер самого контейнера.
2. Добавляем Zero BLock, создаем внутри блока html контейнер и присваиваем ему класс ti-imgslider
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. При необходимости указываем дополнительные настройки в генераторе кода:
Цвет линии ползунка - указываем цвет для разделяющей линии;
Толщина линии ползунка - указываем толщину разделяющей линии;
Радиус скругления углов - указываем радиус скругления углов слайдера;
Цвет обводки слайдера - указываем цвет обводки слайдера;
Толщина обводки слайдера - указываем толщину обводки слайдера;
4. Копируем готовый код и вставляем в html контейнер, который мы создали в Zero Block. Для адаптации достаточно изменить размер самого контейнера.
AFTER
BEFORE
