Телефоны

  • 0-9
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • Y
  • Z

Каталог

Цена
-
  • По популярности
  • Сначала дешёвые
  • Сначала дорогие
  • По названию
  • Новинки
Grespania / Греспания
Стереть
очистить

Плинтус Kerama Marazzi Резиденция FMC005 Плинтус Бежевый 10x20

Артикул FMC005
Страна Россия Россия
Размер 10x20
Поверхность Матовая
Наличие: 8 шт

Бордюр Kerama Marazzi Раваль SPA034R Бордюр Коричневый Обрезной 30x89.5

Артикул SPA034R
Страна Россия Россия
Размер 30x90
Поверхность Натуральная
Наличие: 39 шт

Декор Kerama Marazzi Про Лаймстоун ID125T Декор Бежевый Матовый 60x60

Артикул ID125T
Страна Россия Россия
Размер 60x60
Поверхность Матовая
Наличие: по запросу

Плинтус Kerama Marazzi Монфорте FME006R Плинтус Белый Обрезной 20x40

Артикул FME006R
Страна Россия Россия
Размер 20x40
Поверхность Матовая
Наличие: по запросу

Бордюр Kerama Marazzi Монфорте LSA013R Бордюр Белый Структура Обрезной 40x120

Артикул LSA013R
Страна Россия Россия
Размер 40x120
Поверхность Структурированная
Наличие: 17 шт

Бордюр Kerama Marazzi Марсо SPA020R Бордюр Серый Обрезной 2.5x30

Артикул SPA020R
Страна Россия Россия
Размер 3x30
Поверхность Матовая
Наличие: 46 шт

Бордюр Kerama Marazzi Магнолия BDA023R Бордюр Оранжевый Обрезной Матовый 12x30

Артикул BDA023R
Страна Россия Россия
Размер 12x30
Поверхность Матовая
Наличие: по запросу

Бордюр Kerama Marazzi Карму BDA019R Бордюр Бежевый Светлый Обрезной Матовый 12x30

Артикул BDA019R
Страна Россия Россия
Размер 12x30
Поверхность Матовая
Наличие: 7 шт

Декор Kerama Marazzi Карелли MM11197 Декор Мозаичный 30x30

Артикул MM11197
Страна Россия Россия
Размер 30x30
Поверхность Глянцевая
Наличие: по запросу

Декор Kerama Marazzi Капри TLA003H Декор Лимончики Глянцевый 9.8x9.8

Артикул TLA003H
Страна Россия Россия
Размер 10x10
Поверхность Глянцевая
Наличие: по запросу

Декор Kerama Marazzi Кантри Шик 7189 Декор Серый 20x50

Артикул 7189
Страна Россия Россия
Размер 20x50
Поверхность Матовая
Наличие: по запросу

Плинтус Kerama Marazzi Кантри Шик FMC010 Плинтус Белый 10x20

Артикул FMC010
Страна Россия Россия
Размер 10x20
Поверхность Матовая
Наличие: 9 шт

Бордюр Kerama Marazzi Виченца BLD016 Бордюр Коричневый 3x15

Артикул BLD016
Страна Россия Россия
Размер 3x15
Поверхность Матовая
Нет в продаже

Декор Kerama Marazzi Вилланелла MM15084 Декор Мозаичный 15x40

Артикул MM15084
Страна Россия Россия
Размер 15x40
Поверхность Глянцевая
Наличие: 65 шт

Декор Kerama Marazzi Бричиола ID139 Декор 1 Наборный 30x32

Артикул ID139
Страна Россия Россия
Размер 30x32
Поверхность Полированная
Наличие: по запросу

Бордюр Kerama Marazzi Алькасар BLD040 Бордюр Оранжевый 7.4x15

Артикул BLD040
Страна Россия Россия
Размер 7x15
Поверхность Глянцевая
Наличие: 56 шт

Мозаика Starmosaic Homework Mosaico Mix Grey Glossy 30.6x30.6

Артикул C0003304
Страна Китай Китай
Размер 31x31
Поверхность Глянцевая
Наличие: по запросу

Мозаика Starmosaic Homework Mosaico Grey Glossy 30.6x30.6

Артикул C0003706
Страна Китай Китай
Размер 31x31
Поверхность Глянцевая
Нет в продаже

Ступени Coliseum San Siro Scalino White Ang DX 33x120

Артикул 620070002518
Страна Россия Россия
Размер 33x120
Поверхность Натуральная
Наличие: по запросу

Мозаика Coliseum San Siro Mosaico White 30x30

Артикул 610110001102
Страна Россия Россия
Размер 30x30
Поверхность Натуральная
Наличие: по запросу

Мозаика Coliseum Expo Mosaico White 30x30

Артикул 610110000976
Страна Россия Россия
Размер 30x30
Поверхность Матовая
Наличие: по запросу

Мозаика Coliseum Expo Mosaico Grey 30x30

Артикул 610110000977
Страна Россия Россия
Размер 30x30
Поверхность Матовая
Наличие: по запросу

Плинтус Coliseum Expo Battiscopa White 7.2x60

Артикул 610130005300
Страна Россия Россия
Размер 7x60
Поверхность Матовая
Наличие: по запросу

Ступени Atlas Concorde Rus Empire Scalino Calacatta Black SX 33x80

Артикул 620070002132
Страна Россия Россия
Размер 33x80
Поверхность Полированная
Наличие: по запросу

Ступени Atlas Concorde Rus Empire Scalino Calacatta Black 33x80

Артикул 620070002118
Страна Россия Россия
Размер 33x80
Поверхность Полированная
Наличие: по запросу

Ступени Atlas Concorde Rus Empire Scalino Arabescato 33x120

Артикул 620070002069
Страна Россия Россия
Размер 33x120
Поверхность Полированная
Наличие: по запросу

Мозаика Atlas Concorde Rus Empire Mosaic Silver 30x30

Артикул 610110000821
Страна Россия Россия
Размер 30x30
Поверхность Полированная
Наличие: по запросу

Ступени Estima Profi Traffic Ступень TF01 Неполированный 30x60

Артикул 30084
Страна Россия Россия
Размер 30x60
Поверхность Натуральная
Наличие: по запросу

Ступени Italon Nordica X2 Border Round Silver 30x60

Артикул 620090001063
Страна Россия Россия
Размер 30x60
Поверхность Структурированная
Наличие: по запросу

Ступени Italon Materia X2 Border Round Svasato SX Titanio 30x60

Артикул 620090000412
Страна Россия Россия
Размер 30x60
Поверхность Натуральная
Наличие: по запросу
1900
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Vives

1900

Страна Испания Испания
1XL
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Artcer

1XL

Страна Индия Индия
20mm
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Ocean Ceramic

20mm

Страна Индия Индия
20Twenty
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Emil Ceramica

20Twenty

Страна Италия Италия
20x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Ocean Ceramic

20x120

Страна Индия Индия
2XL
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Artcer

2XL

Страна Индия Индия
30x60
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Concor

30x60

Страна Индия Индия
3D
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Porcelanosa

3D

Страна Испания Испания
3D Experience
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Шоурум
Italon

3D Experience

Страна Россия Россия
3D Wall
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Atlas Concorde

3D Wall

Страна Италия Италия
3D Wall Design
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Atlas Concorde

3D Wall Design

Страна Италия Италия
3D Wall Plaster
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Atlas Concorde

3D Wall Plaster

Страна Италия Италия
3D White Wall
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Atlas Concorde Rus

3D White Wall

Страна Россия Россия
3XL
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Artcer

3XL

Страна Индия Индия
4D
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Marca Corona

4D

Страна Италия Италия
60
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Шоурум
WOW

60

Страна Испания Испания
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Bluezone

60x120

Страна Индия Индия
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Ocean Ceramic

60x120

Страна Индия Индия
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Italica

60x120

Страна Индия Индия
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Concor

60x120

Страна Индия Индия
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Leopard

60x120

Страна Индия Индия
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Etili Seramik

60x120

Страна Турция Турция
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Gresant

60x120

Страна Индия Индия
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Landgrace

60x120

Страна Индия Индия
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
QUA

60x120

Страна Турция Турция
60x120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Гранитея

60x120

Страна Россия Россия
60x60
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Ocean Ceramic

60x60

Страна Индия Индия
60x60
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Italica

60x60

Страна Индия Индия
60x60
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Concor

60x60

Страна Индия Индия
60x60
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Landgrace

60x60

Страна Индия Индия
60x60
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Гранитея

60x60

Страна Россия Россия
60х120
Смотреть коллекцию
// gallery-slider.js document.addEventListener('DOMContentLoaded', function() { const gallerySliders = document.querySelectorAll('.collection-card__gallery-slider'); if (gallerySliders.length === 0) return; // Функция для смены слайда function changeSlide(slider, direction) { const images = slider.querySelectorAll('.collection-card__slider-image'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); const activeImage = slider.querySelector('.collection-card__slider-image.active'); const activeDot = slider.querySelector('.collection-card__slider-dot.active'); if (!activeImage || images.length <= 1) return; let currentIndex = parseInt(activeImage.dataset.index); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % images.length; } else if (direction === 'prev') { newIndex = (currentIndex - 1 + images.length) % images.length; } else { newIndex = direction; // если передано число } // Анимация перехода activeImage.style.opacity = '0'; activeImage.classList.remove('active'); setTimeout(() => { activeImage.style.display = 'none'; const nextImage = slider.querySelector(`.collection-card__slider-image[data-index="${newIndex}"]`); nextImage.style.display = 'block'; setTimeout(() => { nextImage.style.opacity = '1'; nextImage.classList.add('active'); }, 10); }, 300); // Обновляем индикаторы if (activeDot) { activeDot.classList.remove('active'); } const nextDot = slider.querySelector(`.collection-card__slider-dot[data-index="${newIndex}"]`); if (nextDot) { nextDot.classList.add('active'); } } // Инициализация слайдеров gallerySliders.forEach(slider => { const prevBtn = slider.querySelector('.collection-card__slider-prev'); const nextBtn = slider.querySelector('.collection-card__slider-next'); const dots = slider.querySelectorAll('.collection-card__slider-dot'); // Обработчики для кнопок if (prevBtn) { prevBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'prev'); }); } if (nextBtn) { nextBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); changeSlide(slider, 'next'); }); } // Обработчики для точек dots.forEach(dot => { dot.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const index = parseInt(dot.dataset.index); changeSlide(slider, index); }); }); // Автоматическая смена при наведении мыши (по горизонтали) let mouseX = 0; let isDragging = false; let startX = 0; let threshold = 50; // порог для смены слайда slider.addEventListener('mousemove', (e) => { if (!isDragging) return; const currentX = e.clientX; const diff = currentX - startX; if (Math.abs(diff) > threshold) { if (diff > 0) { changeSlide(slider, 'prev'); } else { changeSlide(slider, 'next'); } startX = currentX; } }); slider.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; }); slider.addEventListener('mouseup', () => { isDragging = false; }); slider.addEventListener('mouseleave', () => { isDragging = false; }); // Свайп для мобильных устройств let touchStartX = 0; let touchEndX = 0; slider.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); slider.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const diff = touchStartX - touchEndX; if (Math.abs(diff) > 50) { // минимальное расстояние свайпа if (diff > 0) { changeSlide(slider, 'next'); } else { changeSlide(slider, 'prev'); } } } // Автопрокрутка при длительном наведении let autoSlideInterval; let hoverTimer; slider.addEventListener('mouseenter', () => { // Запускаем автопрокрутку через 3 секунды наведения hoverTimer = setTimeout(() => { autoSlideInterval = setInterval(() => { changeSlide(slider, 'next'); }, 3000); // меняем каждые 3 секунды }, 3000); }); slider.addEventListener('mouseleave', () => { clearTimeout(hoverTimer); clearInterval(autoSlideInterval); }); }); }); // Подключите этот файл в template.php $this->addExternalJS($templateFolder . '/gallery-slider.js');
Polo Gres

60х120

Страна Индия Индия