магазин кастомных решений для тильды
Здесь собраны самые уникальные решения для тильды, с помощью которых вы сможете расширить функционал своих сайтов
Обучающие продукты
бесплатный
базовый
для опытных
Предзапись на курс по стилизации стандартных блоков на тильде
Вы можете забронировать за собой самую низкую стоимость обучения, которое стартует 27 октября
Забронировать место
30+ бесплатных модификаций для твоих проектов на тильде
Уникальные модификации, с помощью которых вы сделаете свои проекты ещё круче, продуманнее и функциональнее
Перейти
телеграм-канал для дизайнеров
Чтобы не пропустить выход новых уроков, бесплатных и платных модификаций и также анонсов обучения — подписывайся на мой телеграм-канал
подписаться
Связаться со мной
Я на связи с 10:00 до 18:00 (мск) в будние дни
Заказать разработку сайта
Вы можете заказать у меня не только разработку сайта на тильде, но и также дизайн сложных продуктов в фигме
Сайт-портфолио
ST300 ST305N ST310N ST315N
Слайдер для блоков магазина по window
В данной модификации 6 вариантов слайдеров для стандартных блоков магазина, вы можете добавлять как один слайдер на странице, так и несколько, с разными настройками для каждого
С полосой прокрутки, можно листать слайды с помощью перемещения полузнка
С буллетами в виде полосок, также активная полоса имеет индикатор заполнения
С обычными буллетами, активный выделен цветом и большим размером
С нумерацией количества слайдов, номер активного слайда имеет свои настройки
Бегущая строка из карточек товаров
С кнопкой паузы
<!--https://dsgnmax.ru/sliders/slider-shop--> <script>
document.addEventListener('DOMContentLoaded', () => {
const containers = document.querySelectorAll('.js-store-grid-cont');
containers.forEach((container) => {
const parent = container.closest('[class*="uc-slider-shop"]');
if (parent) {
container.addEventListener('tStoreRendered', () => initializeSwiper(container, parent));
}
});
function initializeSwiper(container, parent) {
const slides = container.querySelectorAll('.js-product');
container.classList.add('swiper');
const wrapper = document.createElement('div');
wrapper.classList.add('swiper-wrapper');
slides.forEach((slide) => {
slide.classList.add('swiper-slide');
wrapper.appendChild(slide);
});
container.innerHTML = '';
container.appendChild(wrapper);
const dbmNextButton = document.createElement('div');
dbmNextButton.classList.add('swiper-button-next-dbm');
const dbmPrevButton = document.createElement('div');
dbmPrevButton.classList.add('swiper-button-prev-dbm');
const scrollbar = document.createElement('div');
scrollbar.classList.add('swiper-scrollbar-dbm');
container.appendChild(dbmNextButton);
container.appendChild(dbmPrevButton);
container.appendChild(scrollbar);
// Основные параметры слайдера
let swiperConfig = {
loop: false, //Бесконечная галлерея
navigation: {
nextEl: dbmNextButton,
prevEl: dbmPrevButton,
},
scrollbar: {
el: '.swiper-scrollbar-dbm',
draggable: true,
},
autoplay: {
delay: 2000, //Время до пролистывания слайдов
disableOnInteraction: false, //автопролистывание после ручного переключения
},
effect: 'slide',
speed: 400, //Скорость пролистывания слайдов
slidesPerView: 6, //Количество карточек на экране
spaceBetween: 20, //Отступ между карточками
slidesPerGroup: 2, //Пролистывание слайдов за раз
breakpoints: {
320: {
slidesPerView: 1,
slidesPerGroup: 1,
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 6,
slidesPerGroup: 1,
}
}
};
// Настройки для слайдера с классом uc-slider-shop-1
if (parent.classList.contains('uc-slider-shop-1')) {
swiperConfig.speed = 400; //Скорость пролистывания слайдов
swiperConfig.slidesPerGroup = 3; //пролистывание слайдов за раз
swiperConfig.slidesPerView = 4; //Количество карточек на экране
swiperConfig.breakpoints = {
320: {
slidesPerView: 1,
slidesPerGroup: 1,
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 4,
slidesPerGroup: 2,
}
};
}
// Вы можете добавить аналогичные условия для uc-slider-shop-2, uc-slider-shop-3, и так далее.
// Например:
// if (parent.classList.contains('uc-slider-shop-2')) {
// // какие-то настройки для uc-slider-shop-2
// }
const swiper = new Swiper(container, swiperConfig);
window.addEventListener('resize', () => swiper.update());
swiper.init();
}
containers.forEach((container) => {
const event = new Event('tStoreRendered');
container.dispatchEvent(event);
});
});
</script> <style>
:root{
--dbmPaddingSliderDesktop: 40px; /*Отступы от края экрана на декстопе*/
--dbmPaddingSliderTablet: 20px; /*Отступы от края экрана на планшетах*/
--dbmPaddingSliderMobile: 10px; /*Отступы от края экрана на мобилках*/
--dbmIconArrowPrev: url(https://static.tildacdn.com/tild6162-3263-4135-b334-346562393036/arrow-prev.svg); /*Иконка "предыдущий слайд"*/
--dbmIconArrowNext: url(https://static.tildacdn.com/tild3637-3632-4531-a432-633034666565/arrow-next.svg); /*Иконка "следующий слайд"*/
--dbmBorderRadiusArrow: 12px; /*Скругление углов у стрелок*/
--dbmWidthHeightArrow: 40px; /*Ширина и высота иконки*/
--dbmGapSlider: 20px; /*Отступ между карточками товаров*/
/*Контейнера прогрессбара*/
--dbmBackgroundScrollbarContainer: #cecece; /*Фоновый цвет*/
--dbmPaddingScrollbarContainer: 0px; /*Отступы вокруг*/
--dbmBorderRadiusScrollbarContainer: 100px; /*Скругление углов*/
--dbmHeightScrollbarContainer: 6px; /*Высота*/
--dbmMarginTop: 30px; /*Отступ сверху до карточек*/
/*Ползунок прогрессбара*/
--dbmBackgroundDrag: #7C7C7C; /*Фоновый цвет*/
--dbmBorderRadiusDrag: 100px; /*Скругление углов*/
}
[class*="uc-slider-shop"] .t-store__grid-separator{
display: none;
}
[class*="uc-slider-shop"] .swiper-button-next-dbm,
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
position: absolute;
top: 0px;
right: 0px;
width: var(--dbmWidthHeightArrow);
height: var(--dbmWidthHeightArrow);
border-radius: var(--dbmBorderRadiusArrow);
cursor: pointer;
}
[class*="uc-slider-shop"] .swiper-button-disabled{
opacity: 0.5;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
right: 50px; /* отодвигаем левую стрелку налево */
}
[class*="uc-slider-shop"] .swiper-button-next-dbm{
background-image: var(--dbmIconArrowNext);
background-size: cover;
background-repeat: no-repeat;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm{
background-image: var(--dbmIconArrowPrev);
background-size: cover;
background-repeat: no-repeat;
}
/*Стили для скроллбара в слайдере*/
[class*="uc-slider-shop"] .swiper-scrollbar-dbm {
height: var(--dbmHeightScrollbarContainer) !important;
width: 100% !important;
background-color: var(--dbmBackgroundScrollbarContainer);
border-radius: var(--dbmBorderRadiusScrollbarContainer);
padding: var(--dbmPaddingScrollbarContainer);
margin-top: var(--dbmMarginTop);
}
[class*="uc-slider-shop"] .swiper-scrollbar-drag {
background-color: var(--dbmBackgroundDrag);
height: 100%;
border-radius: var(--dbmBorderRadiusDrag);
cursor: pointer;
}
/* Ваши стили для контейнера и карточек */
[class*="uc-slider-shop"] .swiper {
margin: 0 auto; /* Центрирование контейнера */
overflow: hidden;
max-width: calc(100vw - (var(--dbmPaddingSliderDesktop) * 2));
/*max-width: 100vw;*/
position: relative;
padding: 0 !important;
padding-top: 50px !important;
}
/* Стили для родителя*/
[class*="uc-slider-shop"] .swiper-wrapper {
display: flex;
flex-wrap: nowrap; /* Чтобы карточки стояли в ряд */
gap: var(--dbmGapSlider);
}
[class*="uc-slider-shop"] .swiper-slide {
height: 100%;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto; /* Карточки не растягиваются и не схлопываются */
}
[class*="uc-slider-shop"] .swiper-slide > div {
width: 100% !important;
}
@media screen and (max-width: 1000px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderTablet) * 2));
}
}
@media screen and (max-width: 640px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderMobile) * 2));
}
}
</style> <script>
//Подгоняем высоту всех карточек
function setEqualHeight() {
const elements = document.querySelectorAll('[class*="uc-slider-shop"] .t-store__card__textwrapper');
if (elements.length === 0) return;
elements.forEach(el => el.style.height = 'auto');
let maxHeight = 0;
elements.forEach(el => {
const height = el.offsetHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
elements.forEach(el => el.style.height = `${maxHeight}px`);
}
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
document.addEventListener('DOMContentLoaded', setEqualHeight);
window.addEventListener('resize', debounce(setEqualHeight, 250));
const observerHeighCard = new MutationObserver(debounce(setEqualHeight, 250));
const configHeightCard = { childList: true, subtree: true };
observerHeighCard.observe(document.body, configHeightCard);
</script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <!--https://dsgnmax.ru/sliders/slider-shop--> <script>
document.addEventListener('DOMContentLoaded', () => {
const containers = document.querySelectorAll('.js-store-grid-cont');
containers.forEach((container) => {
const parent = container.closest('[class*="uc-slider-shop"]');
if (parent) {
container.addEventListener('tStoreRendered', () => initializeSwiper(container, parent));
}
});
function initializeSwiper(container, parent) {
const slides = container.querySelectorAll('.js-product');
container.classList.add('swiper');
const wrapper = document.createElement('div');
wrapper.classList.add('swiper-wrapper');
slides.forEach((slide) => {
slide.classList.add('swiper-slide');
wrapper.appendChild(slide);
});
container.innerHTML = '';
container.appendChild(wrapper);
const dbmNextButton = document.createElement('div');
dbmNextButton.classList.add('swiper-button-next-dbm');
const dbmPrevButton = document.createElement('div');
dbmPrevButton.classList.add('swiper-button-prev-dbm');
const pagination = document.createElement('div');
pagination.classList.add('swiper-pagination-dbm');
container.appendChild(dbmNextButton);
container.appendChild(dbmPrevButton);
container.appendChild(pagination);
// Основные параметры по умолчанию (если нет дополнительных слайдеров)
let swiperConfig = {
loop: false, //Бесконечная галлерея, если true – то бесконечная прокрутка слайдов
navigation: {
nextEl: dbmNextButton,
prevEl: dbmPrevButton,
},
pagination: {
el: pagination,
clickable: true,
type: 'bullets',
},
autoplay: {
delay: 2000, //Время до пролистывания слайдов
disableOnInteraction: false, //если нужно остановить автопролистывание после ручного переключения слайдов, то напишите true
},
effect: 'slide',
speed: 400, //Скорость пролистывания слайдов
slidesPerView: 6, //Количество карточек на экране
spaceBetween: 20, //Отступ между карточками
slidesPerGroup: 1, //Пролистывание слайдов за раз
breakpoints: {
320: {
slidesPerView: 1,
slidesPerGroup: 1,
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 6,
slidesPerGroup: 1,
}
}
};
// Настройки для слайдера с классом uc-slider-shop-1
if (parent.classList.contains('uc-slider-shop-1')) {
swiperConfig.breakpoints = {
320: {
slidesPerView: 1, //Количество карточек на экране
slidesPerGroup: 1, //пролистывание слайдов за раз
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 4,
slidesPerGroup: 2,
}
};
}
// Вы можете добавить аналогичные условия для uc-slider-2, uc-slider-3, и так далее.
// Например:
// if (parent.classList.contains('uc-slider-shop-3')) {
// // какие-то настройки для uc-slider-shop-3
// }
const swiper = new Swiper(container, swiperConfig);
function updateBullets() {
const bullets = pagination.querySelectorAll('.swiper-pagination-bullet');
bullets.forEach((bullet) => {
bullet.style.setProperty('--animation-duration', `${swiperConfig.autoplay.delay}ms`);
});
}
swiper.on('slideChange', () => {
updateBullets();
});
swiper.on('paginationUpdate', () => {
updateBullets();
});
swiper.on('init', () => {
updateBullets();
});
pagination.addEventListener('click', (event) => {
if (event.target.classList.contains('swiper-pagination-bullet')) {
const bullets = Array.from(pagination.querySelectorAll('.swiper-pagination-bullet'));
const index = bullets.indexOf(event.target);
swiper.slideToLoop(index);
}
});
window.addEventListener('resize', () => swiper.update());
swiper.init();
}
containers.forEach((container) => {
const event = new Event('tStoreRendered');
container.dispatchEvent(event);
});
});
</script> <style>
:root{
/*Общие стили*/
--dbmPaddingSliderDesktop: 40px; /*Отступы от края экрана на декстопе*/
--dbmPaddingSliderTablet: 20px; /*Отступы от края экрана на планшетах*/
--dbmPaddingSliderMobile: 10px; /*Отступы от края экрана на мобилках*/
--dbmIconArrowPrev: url(https://static.tildacdn.com/tild6162-3263-4135-b334-346562393036/arrow-prev.svg); /*Иконка "предыдущий слайд"*/
--dbmIconArrowNext: url(https://static.tildacdn.com/tild3637-3632-4531-a432-633034666565/arrow-next.svg); /*Иконка "следующий слайд"*/
--dbmBorderRadiusArrow: 12px; /*Скругление углов у стрелок*/
--dbmWidthHeightArrow: 40px; /*Ширина и высота иконки*/
--dbmGapSlider: 20px; /*Отступ между карточками товаров*/
/*Стили для буллетов*/
--dbmBackgroundBullet: #cecece; /*Фоновый цвет*/
--dbmGapBullet: 5px; /*Отступы вокруг*/
--dbmBorderRadiusBullet: 100px; /*Скругление углов*/
--dbmHeightBullet: 6px; /*Высота*/
--dbmBulletMarginTop: 30px; /*Отступ сверху до карточек*/
--dbmBackgroundActiveBullet: #cecece; /*Цвет активного буллета*/
--dbmWidthActiveBullet: 130%; /*Ширина активного буллета*/
--dbmColorIndicationBullet: rgba(0, 0, 0, 0.4); /*Цвет индикатора заполнения*/
}
[class*="uc-slider-shop"] .t-store__grid-separator{
display: none;
}
[class*="uc-slider-shop"] .swiper-button-next-dbm,
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
position: absolute;
top: 0px;
right: 0px;
width: var(--dbmWidthHeightArrow);
height: var(--dbmWidthHeightArrow);
border-radius: var(--dbmBorderRadiusArrow);
cursor: pointer;
}
[class*="uc-slider-shop"] .swiper-button-disabled{
opacity: 0.5;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
right: 50px; /* отодвигаем левую стрелку налево */
}
[class*="uc-slider-shop"] .swiper-button-next-dbm{
background-image: var(--dbmIconArrowNext);
background-size: cover;
background-repeat: no-repeat;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm{
background-image: var(--dbmIconArrowPrev);
background-size: cover;
background-repeat: no-repeat;
}
/*Стили для буллетов в слайдере*/
[class*="uc-slider-shop"] .swiper-pagination-dbm {
width: 100%;
margin-top: var(--dbmBulletMarginTop);
position: relative;
display: flex;
flex-wrap: nowrap;
gap: var(--dbmGapBullet);
justify-content: center;
}
[class*="uc-slider-shop"] .swiper-pagination-bullet {
background: var(--dbmBackgroundBullet);
width: 100%;
height: var(--dbmHeightBullet);
opacity: 0.5;
transition: all 0.4s ease-in-out;
border-radius: var(--dbmBorderRadiusBullet);
overflow: hidden;
position: relative;
cursor: pointer;
}
[class*="uc-slider-shop"] .swiper-pagination-bullet-active {
background: var(--dbmBackgroundActiveBullet);
width: var(--dbmWidthActiveBullet);
opacity: 1;
}
[class*="uc-slider-shop"] .swiper-pagination-bullet::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--dbmColorIndicationBullet);
transform: scaleX(0);
transform-origin: left;
}
[class*="uc-slider-shop"] .swiper-pagination-bullet-active::before {
animation: fill var(--animation-duration) linear forwards;
}
/* Ваши стили для контейнера и карточек */
[class*="uc-slider-shop"] .swiper {
margin: 0 auto; /* Центрирование контейнера */
overflow: hidden;
max-width: calc(100vw - (var(--dbmPaddingSliderDesktop) * 2));
/*max-width: 100vw;*/
position: relative;
padding: 0 !important;
padding-top: 50px !important;
}
/* Стили для внутреннего обертки */
[class*="uc-slider-shop"] .swiper-wrapper {
display: flex;
flex-wrap: nowrap; /* Чтобы карточки стояли в ряд */
gap: var(--dbmGapSlider);
}
[class*="uc-slider-shop"] .swiper-slide {
height: 100%;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto; /* Карточки не растягиваются и не схлопываются */
}
[class*="uc-slider-shop"] .swiper-slide > div {
width: 100% !important;
}
@media screen and (max-width: 1000px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderTablet) * 2));
}
}
@media screen and (max-width: 640px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderMobile) * 2));
}
}
@keyframes fill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
</style> <script>
//Подгоняем высоту всех карточек
function setEqualHeight() {
const elements = document.querySelectorAll('[class*="uc-slider-shop"] .t-store__card__textwrapper');
if (elements.length === 0) return;
elements.forEach(el => el.style.height = 'auto');
let maxHeight = 0;
elements.forEach(el => {
const height = el.offsetHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
elements.forEach(el => el.style.height = `${maxHeight}px`);
}
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
document.addEventListener('DOMContentLoaded', setEqualHeight);
window.addEventListener('resize', debounce(setEqualHeight, 250));
const observerHeighCard = new MutationObserver(debounce(setEqualHeight, 250));
const configHeightCard = { childList: true, subtree: true };
observerHeighCard.observe(document.body, configHeightCard);
</script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <!--https://dsgnmax.ru/sliders/slider-shop--> <script>
document.addEventListener('DOMContentLoaded', () => {
const containers = document.querySelectorAll('.js-store-grid-cont');
containers.forEach((container) => {
const parent = container.closest('[class*="uc-slider-shop"]');
if (parent) {
container.addEventListener('tStoreRendered', () => initializeSwiper(container, parent));
}
});
function initializeSwiper(container, parent) {
const slides = container.querySelectorAll('.js-product');
container.classList.add('swiper');
const wrapper = document.createElement('div');
wrapper.classList.add('swiper-wrapper');
slides.forEach((slide) => {
slide.classList.add('swiper-slide');
wrapper.appendChild(slide);
});
container.innerHTML = '';
container.appendChild(wrapper);
const dbmNextButton = document.createElement('div');
dbmNextButton.classList.add('swiper-button-next-dbm');
const dbmPrevButton = document.createElement('div');
dbmPrevButton.classList.add('swiper-button-prev-dbm');
const pagination = document.createElement('div');
pagination.classList.add('swiper-pagination-dbm');
container.appendChild(dbmNextButton);
container.appendChild(dbmPrevButton);
container.appendChild(pagination);
// Основные параметры по умолчанию (если нет дополнительных слайдеров)
let swiperConfig = {
loop: false, //Бесконечная галлерея, если true – то бесконечная прокрутка слайдов
navigation: {
nextEl: dbmNextButton,
prevEl: dbmPrevButton,
},
pagination: {
el: pagination,
clickable: true,
type: 'bullets',
},
autoplay: {
delay: 2000, //Время до пролистывания слайдов
disableOnInteraction: false, //если нужно остановить автопролистывание после ручного переключения слайдов, то напишите true
},
effect: 'slide',
speed: 400, //Скорость пролистывания слайдов
slidesPerView: 6, //Количество карточек на экране
spaceBetween: 20, //Отступ между карточками
slidesPerGroup: 1, //Пролистывание слайдов за раз
breakpoints: {
320: {
slidesPerView: 1,
slidesPerGroup: 1,
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 6,
slidesPerGroup: 1,
}
}
};
// Настройки для слайдера с классом uc-slider-shop-1
if (parent.classList.contains('uc-slider-shop-1')) {
swiperConfig.breakpoints = {
320: {
slidesPerView: 1, //Количество карточек на экране
slidesPerGroup: 1, //пролистывание слайдов за раз
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 4,
slidesPerGroup: 2,
}
};
}
// Вы можете добавить аналогичные условия для uc-slider-2, uc-slider-3, и так далее.
// Например:
// if (parent.classList.contains('uc-slider-shop-3')) {
// // какие-то настройки для uc-slider-shop-3
// }
const swiper = new Swiper(container, swiperConfig);
window.addEventListener('resize', () => swiper.update());
swiper.init();
}
containers.forEach((container) => {
const event = new Event('tStoreRendered');
container.dispatchEvent(event);
});
});
</script> <style>
:root{
/*Общие стили*/
--dbmPaddingSliderDesktop: 40px; /*Отступы от края экрана на декстопе*/
--dbmPaddingSliderTablet: 20px; /*Отступы от края экрана на планшетах*/
--dbmPaddingSliderMobile: 10px; /*Отступы от края экрана на мобилках*/
--dbmIconArrowPrev: url(https://static.tildacdn.com/tild6162-3263-4135-b334-346562393036/arrow-prev.svg); /*Иконка "предыдущий слайд"*/
--dbmIconArrowNext: url(https://static.tildacdn.com/tild3637-3632-4531-a432-633034666565/arrow-next.svg); /*Иконка "следующий слайд"*/
--dbmBorderRadiusArrow: 12px; /*Скругление углов у стрелок*/
--dbmWidthHeightArrow: 40px; /*Ширина и высота иконки*/
--dbmGapSlider: 20px; /*Отступ между карточками товаров*/
/*Стили для буллетов*/
--dbmBackgroundBullet: #cecece; /*Фоновый цвет буллета*/
--dbmGapBullet: 5px; /*Отступы между буллетами*/
--dbmBorderRadiusBullet: 100px; /*Скругление углов*/
--dbmWidthHeightBullet: 6px; /*Высота и ширина буллета*/
--dbmBulletMarginTop: 30px; /*Отступ сверху до карточек*/
--dbmBackgroundActiveBullet: #232323; /*Цвет активного буллета*/
--dbmScaleActiveBullet: 1.5; /*Увеличение активного буллета*/
--dbmAlignBullet: center ; /*Вырванивание буллетов, flex-start – по левой стороне, center – по центру, flex-end – по правой стороне*/
}
[class*="uc-slider-shop"] .t-store__grid-separator{
display: none;
}
[class*="uc-slider-shop"] .swiper-button-next-dbm,
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
position: absolute;
top: 0px;
right: 0px;
width: var(--dbmWidthHeightArrow);
height: var(--dbmWidthHeightArrow);
border-radius: var(--dbmBorderRadiusArrow);
cursor: pointer;
}
[class*="uc-slider-shop"] .swiper-button-disabled{
opacity: 0.5;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
right: 50px; /* отодвигаем левую стрелку налево */
}
[class*="uc-slider-shop"] .swiper-button-next-dbm{
background-image: var(--dbmIconArrowNext);
background-size: cover;
background-repeat: no-repeat;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm{
background-image: var(--dbmIconArrowPrev);
background-size: cover;
background-repeat: no-repeat;
}
/*Стили для буллетов в слайдере*/
[class*="uc-slider-shop"] .swiper-pagination-dbm {
width: 100%;
margin-top: var(--dbmBulletMarginTop);
margin-bottom: 10px;
position: relative;
display: flex;
flex-wrap: nowrap;
gap: var(--dbmGapBullet);
justify-content: var(--dbmAlignBullet);
}
[class*="uc-slider-shop"] .swiper-pagination-bullet {
background: var(--dbmBackgroundBullet);
width: var(--dbmWidthHeightBullet);
height: var(--dbmWidthHeightBullet);
opacity: 0.5;
transition: all 0.4s ease-in-out;
border-radius: var(--dbmBorderRadiusBullet);
overflow: hidden;
position: relative;
cursor: pointer;
}
[class*="uc-slider-shop"] .swiper-pagination-bullet-active {
background: var(--dbmBackgroundActiveBullet);
opacity: 1;
scale: var(--dbmScaleActiveBullet);
}
/* Ваши стили для контейнера и карточек */
[class*="uc-slider-shop"] .swiper {
margin: 0 auto; /* Центрирование контейнера */
overflow: hidden;
max-width: calc(100vw - (var(--dbmPaddingSliderDesktop) * 2));
/*max-width: 100vw;*/
position: relative;
padding: 0 !important;
padding-top: 50px !important;
}
/* Стили для внутреннего обертки */
[class*="uc-slider-shop"] .swiper-wrapper {
display: flex;
flex-wrap: nowrap; /* Чтобы карточки стояли в ряд */
gap: var(--dbmGapSlider);
}
[class*="uc-slider-shop"] .swiper-slide {
height: 100%;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto; /* Карточки не растягиваются и не схлопываются */
}
[class*="uc-slider-shop"] .swiper-slide > div {
width: 100% !important;
}
@media screen and (max-width: 1000px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderTablet) * 2));
}
}
@media screen and (max-width: 640px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderMobile) * 2));
}
}
</style> <script>
//Подгоняем высоту всех карточек
function setEqualHeight() {
const elements = document.querySelectorAll('[class*="uc-slider-shop"] .t-store__card__textwrapper');
if (elements.length === 0) return;
elements.forEach(el => el.style.height = 'auto');
let maxHeight = 0;
elements.forEach(el => {
const height = el.offsetHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
elements.forEach(el => el.style.height = `${maxHeight}px`);
}
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
document.addEventListener('DOMContentLoaded', setEqualHeight);
window.addEventListener('resize', debounce(setEqualHeight, 250));
const observerHeighCard = new MutationObserver(debounce(setEqualHeight, 250));
const configHeightCard = { childList: true, subtree: true };
observerHeighCard.observe(document.body, configHeightCard);
</script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <!--https://dsgnmax.ru/sliders/slider-shop--> <script>
document.addEventListener('DOMContentLoaded', () => {
const containers = document.querySelectorAll('.js-store-grid-cont');
containers.forEach((container) => {
const parent = container.closest('[class*="uc-slider-shop"]');
if (parent) {
container.addEventListener('tStoreRendered', () => initializeSwiper(container, parent));
}
});
function initializeSwiper(container, parent) {
const slides = container.querySelectorAll('.js-product');
container.classList.add('swiper');
const wrapper = document.createElement('div');
wrapper.classList.add('swiper-wrapper');
slides.forEach((slide) => {
slide.classList.add('swiper-slide');
wrapper.appendChild(slide);
});
container.innerHTML = '';
container.appendChild(wrapper);
const dbmNextButton = document.createElement('div');
dbmNextButton.classList.add('swiper-button-next-dbm');
const dbmPrevButton = document.createElement('div');
dbmPrevButton.classList.add('swiper-button-prev-dbm');
const pagination = document.createElement('div');
pagination.classList.add('swiper-pagination-dbm');
container.appendChild(dbmNextButton);
container.appendChild(dbmPrevButton);
container.appendChild(pagination);
// Основные параметры по умолчанию (если нет дополнительных слайдеров)
let swiperConfig = {
loop: false, //Бесконечная галлерея, если true – то бесконечная прокрутка слайдов
navigation: {
nextEl: dbmNextButton,
prevEl: dbmPrevButton,
},
pagination: {
el: pagination,
clickable: true,
type: 'fraction',
},
autoplay: {
delay: 2000, //Время до пролистывания слайдов
disableOnInteraction: false, //если нужно остановить автопролистывание после ручного переключения слайдов, то напишите true
},
effect: 'slide',
speed: 400, //Скорость пролистывания слайдов
slidesPerView: 6, //Количество карточек на экране
spaceBetween: 20, //Отступ между карточками
slidesPerGroup: 1, //Пролистывание слайдов за раз
breakpoints: {
320: {
slidesPerView: 1,
slidesPerGroup: 1,
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 6,
slidesPerGroup: 1,
}
}
};
// Настройки для слайдера с классом uc-slider-shop-1
if (parent.classList.contains('uc-slider-shop-1')) {
swiperConfig.breakpoints = {
320: {
slidesPerView: 1, //Количество карточек на экране
slidesPerGroup: 1, //пролистывание слайдов за раз
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 4,
slidesPerGroup: 2,
}
};
}
// Вы можете добавить аналогичные условия для uc-slider-2, uc-slider-3, и так далее.
// Например:
// if (parent.classList.contains('uc-slider-shop-3')) {
// // какие-то настройки для uc-slider-shop-3
// }
const swiper = new Swiper(container, swiperConfig);
window.addEventListener('resize', () => swiper.update());
swiper.init();
}
containers.forEach((container) => {
const event = new Event('tStoreRendered');
container.dispatchEvent(event);
});
});
</script> <style>
:root{
/*Общие стили*/
--dbmPaddingSliderDesktop: 40px; /*Отступы от края экрана на декстопе*/
--dbmPaddingSliderTablet: 20px; /*Отступы от края экрана на планшетах*/
--dbmPaddingSliderMobile: 10px; /*Отступы от края экрана на мобилках*/
--dbmIconArrowPrev: url(https://static.tildacdn.com/tild6162-3263-4135-b334-346562393036/arrow-prev.svg); /*Иконка "предыдущий слайд"*/
--dbmIconArrowNext: url(https://static.tildacdn.com/tild3637-3632-4531-a432-633034666565/arrow-next.svg); /*Иконка "следующий слайд"*/
--dbmBorderRadiusArrow: 12px; /*Скругление углов у стрелок*/
--dbmWidthHeightArrow: 40px; /*Ширина и высота иконки*/
--dbmGapSlider: 20px; /*Отступ между карточками товаров*/
/*Стили для нумераци*/
--dbmNumMarginTop: 30px; /*Отступ сверху до карточек*/
--dbmFontFamily: "Onest", sans-serif; /*ваш шрифт*/
--dbmGapNum: 5px; /*Отступ между цифрами*/
--dbmAlignHorizontalNum: center ; /*Вырванивание цифр по оси Х, flex-start – по левой стороне, center – по центру, flex-end – по правой стороне*/
--dbmAlignVerticalNum: center ; /*Выраванивание цифр по оси Y*/
--dbmColorNum: gray; /*Цвет всех номеров слайда*/
--dbmColorActiveNum: #232323; /*Цвет активного номера*/
--dbmFontSizeActiveNum: 24px; /*Размер текста активного номера*/
}
[class*="uc-slider-shop"] .t-store__grid-separator{
display: none;
}
[class*="uc-slider-shop"] .swiper-button-next-dbm,
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
position: absolute;
top: 0px;
right: 0px;
width: var(--dbmWidthHeightArrow);
height: var(--dbmWidthHeightArrow);
border-radius: var(--dbmBorderRadiusArrow);
cursor: pointer;
}
[class*="uc-slider-shop"] .swiper-button-disabled{
opacity: 0.5;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
right: 50px; /* отодвигаем левую стрелку налево */
}
[class*="uc-slider-shop"] .swiper-button-next-dbm{
background-image: var(--dbmIconArrowNext);
background-size: cover;
background-repeat: no-repeat;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm{
background-image: var(--dbmIconArrowPrev);
background-size: cover;
background-repeat: no-repeat;
}
/*Стили для буллетов в слайдере*/
[class*="uc-slider-shop"] .swiper-pagination-dbm {
width: 100%;
margin-top: var(--dbmNumMarginTop);
margin-bottom: 10px;
position: relative;
display: flex;
flex-wrap: nowrap;
gap: var(--dbmGapNum);
justify-content: var(--dbmAlignHorizontalNum);
font-family: var(--dbmFontFamily);
align-items: var(--dbmAlignVerticalNum);
color: var(--dbmColorNum);
}
[class*="uc-slider-shop"] .swiper-pagination-current{
font-size: var(--dbmFontSizeActiveNum);
color: var(--dbmColorActiveNum);
}
/* Ваши стили для контейнера и карточек */
[class*="uc-slider-shop"] .swiper {
margin: 0 auto; /* Центрирование контейнера */
overflow: hidden;
max-width: calc(100vw - (var(--dbmPaddingSliderDesktop) * 2));
/*max-width: 100vw;*/
position: relative;
padding: 0 !important;
padding-top: 50px !important;
}
/* Стили для внутреннего обертки */
[class*="uc-slider-shop"] .swiper-wrapper {
display: flex;
flex-wrap: nowrap; /* Чтобы карточки стояли в ряд */
gap: var(--dbmGapSlider);
}
[class*="uc-slider-shop"] .swiper-slide {
height: 100%;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto; /* Карточки не растягиваются и не схлопываются */
}
[class*="uc-slider-shop"] .swiper-slide > div {
width: 100% !important;
}
@media screen and (max-width: 1000px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderTablet) * 2));
}
}
@media screen and (max-width: 640px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderMobile) * 2));
}
}
</style> <script>
//Подгоняем высоту всех карточек
function setEqualHeight() {
const elements = document.querySelectorAll('[class*="uc-slider-shop"] .t-store__card__textwrapper');
if (elements.length === 0) return;
elements.forEach(el => el.style.height = 'auto');
let maxHeight = 0;
elements.forEach(el => {
const height = el.offsetHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
elements.forEach(el => el.style.height = `${maxHeight}px`);
}
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
document.addEventListener('DOMContentLoaded', setEqualHeight);
window.addEventListener('resize', debounce(setEqualHeight, 250));
const observerHeighCard = new MutationObserver(debounce(setEqualHeight, 250));
const configHeightCard = { childList: true, subtree: true };
observerHeighCard.observe(document.body, configHeightCard);
</script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <!--https://dsgnmax.ru/sliders/slider-shop--> <script>
document.addEventListener('DOMContentLoaded', () => {
const containersRun = document.querySelectorAll('.js-store-grid-cont');
containersRun.forEach((containerRun) => {
const parentRun = containerRun.closest('[class*="uc-slider-run"]');
if (parentRun) {
containerRun.addEventListener('tStoreRendered', () => initializeSwiper(containerRun, parentRun));
}
});
function initializeSwiper(containerRun, parentRun) {
const slidesRun = containerRun.querySelectorAll('.js-product');
containerRun.classList.add('swiper');
const wrapperRun = document.createElement('div');
wrapperRun.classList.add('swiper-wrapper');
slidesRun.forEach((slideRun) => {
slideRun.classList.add('swiper-slide');
wrapperRun.appendChild(slideRun);
});
containerRun.innerHTML = '';
containerRun.appendChild(wrapperRun);
// Основные параметры по умолчанию (если нет дополнительных слайдеров)
let swiperConfigRun = {
loop: true, //Бесконечная галлерея, если true – то бесконечная прокрутка слайдов
autoplay: {
delay: 0, //Время до пролистывания слайдов
disableOnInteraction: false, //если нужно остановить автопролистывание после ручного переключения слайдов, то напишите true
},
effect: 'slide',
speed: 2000, //Скорость пролистывания слайдов, чем больше значение, тем медленнее двигаются слайды
slidesPerView: 6, //Количество карточек на экране
spaceBetween: 20, //Отступ между карточками
slidesPerGroup: 1, //Пролистывание слайдов за раз
breakpoints: {
320: {
slidesPerView: 1,
slidesPerGroup: 1,
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 6,
slidesPerGroup: 1,
}
}
};
// Настройки для слайдера с классом uc-slider-run-1
if (parentRun.classList.contains('uc-slider-run-1')) {
swiperConfigRun.speed = 5000; //Скорость пролистывания слайдов
swiperConfigRun.breakpoints = {
320: {
slidesPerView: 1, //Количество карточек на экране
slidesPerGroup: 1, //пролистывание слайдов за раз
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 4,
slidesPerGroup: 2,
}
};
}
// Вы можете добавить аналогичные условия для uc-slider-run-2, uc-slider-run-3, и так далее.
// Например:
// if (parentRun.classList.contains('uc-slider-run-3')) {
// // какие-то настройки для uc-slider-run-3
// }
const swiperRun = new Swiper(containerRun, swiperConfigRun);
window.addEventListener('resize', () => swiperRun.update());
}
containersRun.forEach((containerRun) => {
const eventRun = new Event('tStoreRendered');
containerRun.dispatchEvent(eventRun);
});
});
</script> <style>
:root{
/*Общие стили*/
--dbmPaddingSliderRunDesktop: 40px; /*Отступы от края экрана на декстопе*/
--dbmPaddingSliderRunTablet: 20px; /*Отступы от края экрана на планшетах*/
--dbmPaddingSliderRunMobile: 10px; /*Отступы от края экрана на мобилках*/
--dbmGapSliderRun: 20px; /*Отступ между карточками товаров*/
}
[class*="uc-slider-run"] .swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
[class*="uc-slider-run"] .t-store__grid-separator{
display: none;
}
/* Ваши стили для контейнера и карточек */
[class*="uc-slider-run"] .swiper {
margin: 0 auto; /* Центрирование контейнера */
overflow: hidden;
max-width: calc(100vw - (var(--dbmPaddingSliderRunDesktop) * 2));
/*max-width: 100vw;*/
position: relative;
padding: 0 !important;
}
/* Стили для внутреннего обертки */
[class*="uc-slider-run"] .swiper-wrapper {
display: flex;
flex-wrap: nowrap; /* Чтобы карточки стояли в ряд */
gap: var(--dbmGapSliderRun);
}
[class*="uc-slider-run"] .swiper-slide {
height: 100%;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto; /* Карточки не растягиваются и не схлопываются */
}
[class*="uc-slider-run"] .swiper-slide > div {
width: 100% !important;
}
@media screen and (max-width: 1000px){
[class*="uc-slider-run"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderRunTablet) * 2));
}
}
@media screen and (max-width: 640px){
[class*="uc-slider-run"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderRunMobile) * 2));
}
}
</style> <script>
//Подгоняем высоту всех карточек
function setEqualHeight() {
const elements = document.querySelectorAll('[class*="uc-slider-run"] .t-store__card__textwrapper');
if (elements.length === 0) return;
elements.forEach(el => el.style.height = 'auto');
let maxHeight = 0;
elements.forEach(el => {
const height = el.offsetHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
elements.forEach(el => el.style.height = `${maxHeight}px`);
}
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
document.addEventListener('DOMContentLoaded', setEqualHeight);
window.addEventListener('resize', debounce(setEqualHeight, 250));
const observerHeighCard = new MutationObserver(debounce(setEqualHeight, 250));
const configHeightCard = { childList: true, subtree: true };
observerHeighCard.observe(document.body, configHeightCard);
</script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <!--https://dsgnmax.ru/sliders/slider-shop--> <script>
document.addEventListener('DOMContentLoaded', () => {
const containers = document.querySelectorAll('.js-store-grid-cont');
containers.forEach((container) => {
const parent = container.closest('[class*="uc-slider-shop"]');
if (parent) {
container.addEventListener('tStoreRendered', () => initializeSwiper(container, parent));
}
});
function initializeSwiper(container, parent) {
const slides = container.querySelectorAll('.js-product');
container.classList.add('swiper');
const wrapper = document.createElement('div');
wrapper.classList.add('swiper-wrapper');
slides.forEach((slide) => {
slide.classList.add('swiper-slide');
wrapper.appendChild(slide);
});
container.innerHTML = '';
container.appendChild(wrapper);
const dbmNextButton = document.createElement('div');
dbmNextButton.classList.add('swiper-button-next-dbm');
const dbmPrevButton = document.createElement('div');
dbmPrevButton.classList.add('swiper-button-prev-dbm');
const dbmBulletContainer = document.createElement('div');
dbmBulletContainer.classList.add('dbm-bullet-container');
const playPauseButton = document.createElement('button');
playPauseButton.classList.add('swiper-button-play-pause');
playPauseButton.setAttribute('data-playing', 'true');
playPauseButton.innerHTML = '<img src="https://static.tildacdn.com/tild3166-3061-4565-a335-636538303436/pause.svg" alt="Pause">'; //Иконка паузы (отображается изначально)
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("viewBox", "0 0 100 100");
svg.setAttribute("width", 50);
svg.setAttribute("height", 50);
const circleBg = document.createElementNS(svgNS, "circle");
circleBg.setAttribute("cx", 50);
circleBg.setAttribute("cy", 50);
circleBg.setAttribute("r", 48);
circleBg.setAttribute("fill", "none");
circleBg.setAttribute("stroke", "#e0e0e0"); //Фоновый цвет круга
circleBg.setAttribute("stroke-width", 4);
const circleProgress = document.createElementNS(svgNS, "circle");
circleProgress.setAttribute("cx", 50);
circleProgress.setAttribute("cy", 50);
circleProgress.setAttribute("r", 48);
circleProgress.setAttribute("fill", "none");
circleProgress.setAttribute("stroke", "#fc6d14"); //Цвет индикатора
circleProgress.setAttribute("stroke-width", 4);
circleProgress.setAttribute("stroke-dasharray", 2 * Math.PI * 48);
circleProgress.setAttribute("stroke-dashoffset", 2 * Math.PI * 48);
circleProgress.setAttribute("transform", "rotate(-90 50 50)");
svg.appendChild(circleBg);
svg.appendChild(circleProgress);
playPauseButton.appendChild(svg);
const pagination = document.createElement('div');
pagination.classList.add('swiper-pagination-dbm');
dbmBulletContainer.appendChild(playPauseButton);
dbmBulletContainer.appendChild(pagination);
container.appendChild(dbmNextButton);
container.appendChild(dbmPrevButton);
container.appendChild(dbmBulletContainer);
const swiperConfig = {
loop: true,
navigation: {
nextEl: dbmNextButton,
prevEl: dbmPrevButton,
},
pagination: {
el: pagination,
clickable: true,
type: 'bullets',
},
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
effect: 'slide',
speed: 400,
slidesPerView: 6,
spaceBetween: 20,
slidesPerGroup: 1,
breakpoints: {
320: {
slidesPerView: 1,
slidesPerGroup: 1,
},
480: {
slidesPerView: 2,
slidesPerGroup: 1,
},
640: {
slidesPerView: 2,
slidesPerGroup: 1,
},
768: {
slidesPerView: 3,
slidesPerGroup: 1,
},
1000: {
slidesPerView: 4,
slidesPerGroup: 1,
},
1360: {
slidesPerView: 5,
slidesPerGroup: 1,
},
1920: {
slidesPerView: 6,
slidesPerGroup: 1,
}
}
};
const swiper = new Swiper(container, swiperConfig);
let startTime;
let animationFrameId;
const maxProgress = 2 * Math.PI * 48;
const delay = swiperConfig.autoplay.delay;
let accumulatedElapsed = 0;
const animateCircle = (timestamp) => {
if (!startTime) {
startTime = timestamp;
}
const elapsed = timestamp - startTime + accumulatedElapsed;
const progress = Math.min((elapsed / delay) * maxProgress, maxProgress);
circleProgress.style.strokeDashoffset = maxProgress - progress;
if (progress < maxProgress && playPauseButton.getAttribute('data-playing') === 'true') {
animationFrameId = requestAnimationFrame(animateCircle);
}
};
function resetAndStartAnimation() {
startTime = performance.now();
accumulatedElapsed = 0;
circleProgress.style.strokeDashoffset = maxProgress;
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}
animationFrameId = requestAnimationFrame(animateCircle);
}
playPauseButton.addEventListener('click', () => {
const isPlaying = playPauseButton.getAttribute('data-playing') === 'true';
const svg = playPauseButton.querySelector('svg');
if (isPlaying) {
swiper.autoplay.stop();
playPauseButton.setAttribute('data-playing', 'false');
playPauseButton.innerHTML = '<img src="https://static.tildacdn.com/tild6264-3266-4130-a465-656332633661/play.svg" alt="Play">'; //иконка проигрывания
playPauseButton.appendChild(svg);
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}
} else {
swiper.autoplay.start();
playPauseButton.setAttribute('data-playing', 'true');
playPauseButton.innerHTML = '<img src="https://static.tildacdn.com/tild3166-3061-4565-a335-636538303436/pause.svg" alt="Pause">'; //иконка паузы
playPauseButton.appendChild(svg);
resetAndStartAnimation();
}
});
let firstSlideChange = false;
swiper.on('slideChange', () => {
if (!firstSlideChange) {
firstSlideChange = true;
resetAndStartAnimation();
} else {
resetAndStartAnimation();
}
});
window.addEventListener('resize', () => swiper.update());
swiper.init();
}
containers.forEach((container) => {
const event = new Event('tStoreRendered');
container.dispatchEvent(event);
});
});
</script> <style>
:root{
/*Общие стили*/
--dbmPaddingSliderDesktop: 40px; /*Отступы от края экрана на декстопе*/
--dbmPaddingSliderTablet: 20px; /*Отступы от края экрана на планшетах*/
--dbmPaddingSliderMobile: 10px; /*Отступы от края экрана на мобилках*/
--dbmIconArrowPrev: url(https://static.tildacdn.com/tild6162-3263-4135-b334-346562393036/arrow-prev.svg); /*Иконка "предыдущий слайд"*/
--dbmIconArrowNext: url(https://static.tildacdn.com/tild3637-3632-4531-a432-633034666565/arrow-next.svg); /*Иконка "следующий слайд"*/
--dbmBorderRadiusArrow: 12px; /*Скругление углов у стрелок*/
--dbmWidthHeightArrow: 40px; /*Ширина и высота иконки*/
--dbmGapSlider: 20px; /*Отступ между карточками товаров*/
/*Стили для буллетов*/
--dbmBackgroundBullet: #cecece; /*Фоновый цвет*/
--dbmGapBullet: 5px; /*Отступы вокруг*/
--dbmBorderRadiusBullet: 100px; /*Скругление углов*/
--dbmHeightBullet: 8px; /*Высота*/
--dbmBulletMarginTop: 20px; /*Отступ сверху до карточек*/
--dbmBackgroundActiveBullet: #cecece; /*Цвет активного буллета*/
--dbmWidthActiveBullet: 30px; /*Ширина активного буллета*/
--dbmColorIndicationBullet: rgba(0, 0, 0, 0.4); /*Цвет индикатора заполнения*/
--dbmBulletPadding: 20px; /*Отступ вокруг контейнера буллетов*/
--dbmBackgroundColorBullet: #ffffff;
--dbmBorderRadiusContainerBullet: 100px; /*Скругление углов у контейнера буллетов*/
}
[class*="uc-slider-shop"] .t-store__grid-separator{
display: none;
}
[class*="uc-slider-shop"] .swiper-button-next-dbm,
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
position: absolute;
top: 0px;
right: 0px;
width: var(--dbmWidthHeightArrow);
height: var(--dbmWidthHeightArrow);
border-radius: var(--dbmBorderRadiusArrow);
cursor: pointer;
}
[class*="uc-slider-shop"] .swiper-button-disabled{
opacity: 0.5;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm {
right: 50px; /* отодвигаем левую стрелку налево */
}
[class*="uc-slider-shop"] .swiper-button-next-dbm{
background-image: var(--dbmIconArrowNext);
background-size: cover;
background-repeat: no-repeat;
}
[class*="uc-slider-shop"] .swiper-button-prev-dbm{
background-image: var(--dbmIconArrowPrev);
background-size: cover;
background-repeat: no-repeat;
}
/*Стили для буллетов в слайдере*/
[class*="uc-slider-shop"] .swiper-pagination-dbm {
width: 100%;
position: relative;
display: flex;
flex-wrap: nowrap;
gap: var(--dbmGapBullet);
padding: var(--dbmBulletPadding);
background-color: var(--dbmBackgroundColorBullet);
width: fit-content;
border-radius: var(--dbmBorderRadiusContainerBullet);
}
[class*="uc-slider-shop"] .swiper-pagination-bullet {
background: var(--dbmBackgroundBullet);
width: 8px;
height: var(--dbmHeightBullet);
opacity: 0.5;
transition: all 0.4s ease-in-out;
border-radius: var(--dbmBorderRadiusBullet);
overflow: hidden;
position: relative;
cursor: pointer;
}
[class*="uc-slider-shop"] .swiper-pagination-bullet-active {
background: var(--dbmBackgroundActiveBullet);
width: var(--dbmWidthActiveBullet);
opacity: 1;
}
/*Иконка проигрывания и паузы*/
[class*="uc-slider-shop"] .dbm-bullet-container {
width: 100%;
margin-top: var(--dbmBulletMarginTop);
display: flex;
gap: 10px;
justify-content: center;
}
[class*="uc-slider-shop"] .swiper-button-play-pause {
padding: 0;
border: 0;
background-color: transparent;
height: 50px; /*Высота иконки*/
aspect-ratio: 1 / 1;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
[class*="uc-slider-shop"] .swiper-button-play-pause:hover{
scale: 0.9;
}
[class*="uc-slider-shop"] .swiper-button-play-pause img {
height: 100%;
width: calc(100% - 4px);
}
[class*="uc-slider-shop"] .swiper-button-play-pause svg {
position: absolute;
}
/* Ваши стили для контейнера и карточек */
[class*="uc-slider-shop"] .swiper {
margin: 0 auto; /* Центрирование контейнера */
overflow: hidden;
max-width: calc(100vw - (var(--dbmPaddingSliderDesktop) * 2));
position: relative;
padding: 0 !important;
padding-top: 50px !important;
}
/* Стили для внутреннего обертки */
[class*="uc-slider-shop"] .swiper-wrapper {
display: flex;
flex-wrap: nowrap; /* Чтобы карточки стояли в ряд */
gap: var(--dbmGapSlider);
}
[class*="uc-slider-shop"] .swiper-slide {
height: 100%;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto; /* Карточки не растягиваются и не схлопываются */
}
[class*="uc-slider-shop"] .swiper-slide > div {
width: 100% !important;
}
@media screen and (max-width: 1000px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderTablet) * 2));
}
}
@media screen and (max-width: 640px){
[class*="uc-slider-shop"] .swiper {
max-width: calc(100vw - (var(--dbmPaddingSliderMobile) * 2));
}
}
.swiper-button-play-pause {
position: relative;
width: 50px;
height: 50px;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-button-play-pause img {
z-index: 1;
}
.dbm-bullet-container {
display: flex;
align-items: center;
}
</style> <script>
//Подгоняем высоту всех карточек
function setEqualHeight() {
const elements = document.querySelectorAll('[class*="uc-slider-run"] .t-store__card__textwrapper');
if (elements.length === 0) return;
elements.forEach(el => el.style.height = 'auto');
let maxHeight = 0;
elements.forEach(el => {
const height = el.offsetHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
elements.forEach(el => el.style.height = `${maxHeight}px`);
}
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
document.addEventListener('DOMContentLoaded', setEqualHeight);
window.addEventListener('resize', debounce(setEqualHeight, 250));
const observerHeighCard = new MutationObserver(debounce(setEqualHeight, 250));
const configHeightCard = { childList: true, subtree: true };
observerHeighCard.observe(document.body, configHeightCard);
</script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> 