document.addEventListener('DOMContentLoaded', () => {
    class HvrSlider {
      constructor(selector) {
        const elements = document.querySelectorAll(selector);
        elements.forEach((el) => {
          const imgs = Array.from(el.querySelectorAll('img'));
          if (imgs.length <= 1) return;

          el.classList.add('hvr-slider');

          // Создаём обёртки и переносим туда картинки
          const imagesWrapper = document.createElement('div');
          imagesWrapper.className = 'hvr-slider__images';

          const sectorsWrapper = document.createElement('div');
          sectorsWrapper.className = 'hvr-slider__sectors';

          const dotsWrapper = document.createElement('div');
          dotsWrapper.className = 'hvr-slider__dots';

          imgs.forEach(img => {
            imagesWrapper.appendChild(img);
            img.classList.add('hvr-slider__image');
          });

          el.innerHTML = '';
          el.appendChild(imagesWrapper);
          el.appendChild(sectorsWrapper);
          el.appendChild(dotsWrapper);

          imgs.forEach(() => {
            const sector = document.createElement('div');
            sector.className = 'hvr-slider__sector';
            sectorsWrapper.appendChild(sector);

            const dot = document.createElement('div');
            dot.className = 'hvr-slider__dot';
            dotsWrapper.appendChild(dot);
          });

          const sectors = Array.from(sectorsWrapper.children);
          const dots = Array.from(dotsWrapper.children);

          let activeIndex = 0;

          const setActive = (index) => {
            if(index < 0 || index >= imgs.length) return;
            imgs.forEach((img, i) => {
              img.classList.toggle('hvr-slider__image--active', i === index);
            });
            dots.forEach((dot, i) => {
              dot.classList.toggle('hvr-slider__dot--active', i === index);
            });
            activeIndex = index;
          };

          setActive(0);

          sectorsWrapper.addEventListener('mousemove', e => {
            const rect = sectorsWrapper.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const sectorWidth = rect.width / sectors.length;
            let hoveredIndex = Math.floor(x / sectorWidth);
            setActive(hoveredIndex);
          });

          dots.forEach((dot, idx) => {
            dot.addEventListener('click', () => {
              setActive(idx);
            });
          });

          sectorsWrapper.addEventListener('touchmove', e => {
            const touch = e.changedTouches[0];
            if (!touch) return;
            const rect = sectorsWrapper.getBoundingClientRect();
            const x = touch.clientX - rect.left;
            const sectorWidth = rect.width / sectors.length;
            let hoveredIndex = Math.floor(x / sectorWidth);
            setActive(hoveredIndex);
          }, { passive: true });
        });
      }
    }

    new HvrSlider('.hvr-slider');
  });                                                               .sliders-container {
      display: flex;
      gap: 20px; /* отступ между слайдерами */
      justify-content: center;
      margin: 20px auto;
      max-width: 640px;
    }

    .hvr-slider {
      position: relative;
      width: 300px;
      user-select: none;
      font-family: Arial, sans-serif;
      /* margin: 0 auto;  Убираем центрирование, т.к. flex-контейнер центрирует */
     
      box-sizing: border-box;
      padding: 10px;
    }

    .hvr-slider__images {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
    }

    .hvr-slider__images img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      user-select: none;
    }

    .hvr-slider__images img.hvr-slider__image--active {
      display: block;
      position: relative;
    }

    .hvr-slider__sectors {
      position: absolute;
      top: 10;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      /* cursor: pointer; */
      z-index: 10;
    }

    .hvr-slider__sector {
      flex-grow: 1;
    }

    .hvr-slider__dots {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      gap: 6px;
    }

    .hvr-slider__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #d6dbe0;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .hvr-slider__dot--active {
      background-color: #000;
    }              найди мне тут где код отвечающий за hvr slider sector 100х338