Простой слайдер html без плагинов

Простенький код слайдера HTMl+ CSS+ JS

Стили и оформление уже можно доработать самому.

<div class="simple-slider">
  <div class="slides-container">
    <button class="slider-btn prev">&lt;</button>
    <div class="slides">
<div class="slide">Слайд 1</div>
<div class="slide">Слайд 2</div>
<div class="slide">Слайд 3</div>
<div class="slide">Слайд 4</div>
    
    
    </div>
    <button class="slider-btn next">&gt;</button>
  </div>
  <div class="slider-pagination"></div>
</div>


< style>
.simple-slider {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative; /* ← важно для absolute */
}

.slides-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  flex-wrap: nowrap;
}

.slide {
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
}

/* 🔥 Кнопки — абсолютно позиционированы */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.slider-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.slider-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.slider-pagination button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.slider-pagination button.active {
  background: #555;
}
</ style>

< script>
(function () {
  const maxWait = 5000;
  const checkInterval = 100;
  let elapsed = 0;

  function initSlider() {
    const slidesContainer = document.querySelector('.slides');
    if (!slidesContainer) {
      if (elapsed < maxWait) {
        elapsed += checkInterval;
        setTimeout(initSlider, checkInterval);
        return;
      }
      return;
    }

    // 🔥 ОЧИСТКА: оставляем только .slide
    const cleanSlides = Array.from(slidesContainer.childNodes).filter(node =>
      node.nodeType === 1 && node.classList.contains('slide')
    );

    if (cleanSlides.length === 0) {
      if (elapsed < maxWait) {
        elapsed += checkInterval;
        setTimeout(initSlider, checkInterval);
        return;
      }
      console.warn('Не найдено .slide');
      return;
    }

    // Пересоздаём контейнер только с .slide
    slidesContainer.innerHTML = '';
    cleanSlides.forEach(slide => slidesContainer.appendChild(slide));

    // Уже инициализирован?
    if (slidesContainer.dataset.sliderReady) return;
    slidesContainer.dataset.sliderReady = 'true';

    const slides = cleanSlides;
    const pagination = document.querySelector('.slider-pagination');
    const prevBtn = document.querySelector('.prev');
    const nextBtn = document.querySelector('.next');

    if (!pagination || !prevBtn || !nextBtn) return;

    let index = 0;
    let autoSlideInterval;

    pagination.innerHTML = '';
    const paginationButtons = [];

    slides.forEach((_, i) => {
      const btn = document.createElement('button');
      if (i === 0) btn.classList.add('active');
      btn.addEventListener('click', () => goToSlide(i));
      pagination.appendChild(btn);
      paginationButtons.push(btn);
    });

    function goToSlide(i) {
      index = i;
      slidesContainer.style.transform = `translateX(-${index * 100}%)`;
      paginationButtons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === index);
      });
    }

    function nextSlide() {
      index = (index + 1) % slides.length;
      goToSlide(index);
    }

    function prevSlide() {
      index = (index - 1 + slides.length) % slides.length;
      goToSlide(index);
    }

    nextBtn.addEventListener('click', () => {
      nextSlide();
      resetAutoSlide();
    });

    prevBtn.addEventListener('click', () => {
      prevSlide();
      resetAutoSlide();
    });

    function startAutoSlide() {
      autoSlideInterval = setInterval(nextSlide, 3000);
    }

    function resetAutoSlide() {
      clearInterval(autoSlideInterval);
      startAutoSlide();
    }

    startAutoSlide();

    const container = document.querySelector('.simple-slider');
    if (container) {
      container.addEventListener('mouseenter', () => clearInterval(autoSlideInterval));
      container.addEventListener('mouseleave', startAutoSlide);
    }
  }

  initSlider();
})();
</ script>