Слайдер без плагинов на WordPress на CSS+JS+HTML + пример

Простой код слайдера для сайта на WordPress чисто на CSS+JS+HTML

Код самого баннера


<!-- Слайдер на главной -->
<div id="content-sl" class="container clr">
		
<div class="simple-slider">
  <div class="slides-container">
    <button class="slider-btn prev">&lt;</button>
    <div class="slides">
<!-- начало слайдера - можно отедльно втавить шорткод -->

<div class="slide" id="slide1">
<div class="slidetext">
<h2>Получите скидки на<br>свежие овощи и фрукты</h2>
<div>
<span>до — 10%</span>
<img src="https://zaplata.ru/wp-content/uploads/2026/01/vg-slider-1-label2.png">
</div>
<div>
<a href="/shop">В каталог</a>
<p>Скидка будет действовать при заказе <br>товаров с доставкой с 11:00 до 16:00.</p>
</div>
</div>
<div class="wd-slide-bg wd-fill"></div>
</div>




<div class="slide" id="slide2">
<div class="slidetext">
<h2>Получите скидки на<br>свежие овощи и фрукты</h2>
<div>
<span>до — 10%</span>
<img src="https://zaplata.ru/wp-content/uploads/2026/01/vg-slider-1-label2.png">
</div>
<div>
<a href="/shop">В каталог</a>
<p>Скидка будет действовать при заказе <br>товаров с доставкой с 11:00 до 16:00.</p>
</div>
</div>
<div class="wd-slide-bg wd-fill"></div>
</div>



<div class="slide" id="slide3">
<div class="slidetext">
<h2>Получите скидки на<br>свежие овощи и фрукты</h2>
<div>
<span>до — 10%</span>
<img src="https://zaplata.ru/wp-content/uploads/2026/01/vg-slider-1-label2.png">
</div>
<div>
<a href="/shop">В каталог</a>
<p>Скидка будет действовать при заказе <br>товаров с доставкой с 11:00 до 16:00.</p>
</div>
</div>
<div class="wd-slide-bg wd-fill"></div>
</div>


<div class="slide" id="slide4">
<div class="slidetext" style="
    display: flex;
    text-align: center;
    align-items: center;
">
<h2>Получите скидки на<br>свежие овощи и фрукты</h2>
<div>
<span>до — 10%</span>
<img src="https://zaplata.ru/wp-content/uploads/2026/01/vg-slider-1-label2.png">
</div>
<div>
<a href="/shop">В каталог</a>
<p>Скидка будет действовать при заказе <br>товаров с доставкой с 11:00 до 16:00.</p>
</div>
</div>
<div class="wd-slide-bg wd-fill"></div>
</div>







    

<!-- конец слайдера - можно отедльно втавить шорткод -->
    </div>
    <button class="slider-btn next">&gt;</button>
  </div>
  <div class="slider-pagination wow zoomIn animated"></div>
</div>




</div>

Скрипт к нему


(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, 6000);
    }

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

    startAutoSlide();

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

  initSlider();
})();

Стили баннера


body .slides-container .slide .slidetext{     position: relative;    z-index: 2;    width: 100%;       flex-direction: column;    row-gap: 15px; display: flex;}
body .slides-container .slide .slidetext h2, body .slides-container .slide .slidetext div span{color: #4c5a3c;    font-size: 30px;    line-height: 1.2em;    --wd-width: 380px;    margin: 0;    padding: 0;    font-weight: 600;}
body .slides-container .slide .slidetext div{    display: flex;    align-items: center;    gap: 20px;}
body .slides-container .slide .slidetext div img{    height: 54px;    margin: 0 0 0 ;}
body .slides-container .slide .slidetext div a{    background: #fff;    font-size: 13px;    color: #333;    font-weight: 600;    border-radius: 4px;    padding: 10px 20px;}
body .slides-container .slide .slidetext div p{    margin: 0;    color: #4c5a3cb3;    font-weight: 600;    font-size: 12px;}


body .slides-container .slide {width: 100%;    flex-shrink: 0;     max-height: 380px;min-height: 380px;    box-sizing: border-box;    transform: translateZ(0);    backface-visibility: hidden;    display: flex;    justify-content: center;    overflow: hidden;    padding: 40px;    height: auto;       position: relative;border-radius: 13px;    align-items: center;}
body .slides-container {  position: relative;  overflow: hidden;  width: 100%;}
body .slides-container .slides {  display: flex;  transition: transform 0.5s ease-in-out;  width: 100%;  flex-wrap: nowrap;}
body .simple-slider .slider-pagination button {     width: 10px;    height: 10px;    border-radius: 50%;    background: #ccc;    border: none;    cursor: pointer;    transition: background 0.3s;}
body .simple-slider{    position: relative;}
body .simple-slider .slider-pagination button.active {  background: #555;}
body .simple-slider .slider-pagination {  position: absolute;    bottom: 10px;    left: 50%;    transform: translateX(-50%);    display: flex;    gap: 6px;    z-index: 10;    line-height: 1;    background: #fff;    padding: 5px;    border-radius: 13px;}
body .slides-container .slider-btn.next{   transform: translateX(30px);}
body .slides-container .slider-btn.prev{          transform: translateX(-30px);}
body .slides-container:hover .slider-btn{        opacity: 1;        transform: translateY(0);        pointer-events: unset;    }
body .slides-container .slider-btn{   position: absolute;    top: 50%;    background: rgb(255 255 255 / 85%) !important;    color: #3a3a3a;    border: none;    width: 35px;    height: 35px;    border-radius: 50%;    font-size: 18px;    cursor: pointer;    z-index: 10;    display: flex;    align-items: center;    justify-content: center;    transition: background 0.3s;
    transition: all .25s ease;    opacity: 0;    pointer-events: none;}
body .slides-container  .slider-btn:hover {background: rgb(255 255 255 / 90%);}
body .slides-container .prev {  left: 10px;}
body .slides-container .next {  right: 10px;}
body .slides-container  .slider-btn:hover {background: rgb(255 255 255 / 90%);}

body .slides-container .slides .slide .wd-slide-bg {background-position: center center;background-size: cover;  background-repeat: no-repeat; position: absolute;  inset: 0;}


body .slides-container .slides #slide1 .wd-slide-bg{    background-color: #c9dcb3;    background-image: url(../../../../../wp-content/uploads/2026/01/vg-slider-1-opt1.jpg);}
body .slides-container .slides #slide2 .wd-slide-bg{  background-color:#ecd4ae;    background-image: url(../../../../../wp-content/uploads/2026/01/vg-slider-2-opt.jpg);}
body .slides-container .slides #slide3 .wd-slide-bg{  background-color: #afd8f6;    background-image: url(../../../../../wp-content/uploads/2026/01/vg-slider-3-opt.jpg);}
body .slides-container .slides #slide4 .wd-slide-bg{  background-color: #ecd4ae;    background-image: url(../../../../../wp-content/uploads/2026/01/vg-slider-4-opt.jpg);}
guest
Другие сообщения форума
Закрыть меню