Слайдер #2: Слайдер с фоном для цитат и фактов без плагинов

Простой красивый код слайдера для сайта на WordPress для цитат или фактов дня

Код самого слайдера, вам можно разместить в любом месте (я через ad inserter вообще вывел).
Вам остается только загрузить и заменить свои картинки и текст.

P.S. Если вам интересен плагин – можно его доработать как плагин для сайта, чтобы вы модерировали через файловый менеджер и форму. Пишите на почту.

<div class="index-php container clr sladder">

<style>
.oilgas-slider-container {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin: 20px auto;
  position: relative;
}

.oilgas-slider-wrapper {
  position: relative;
  overflow: hidden;
}

.oilgas-slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.oilgas-slide {
  min-width: 100%;
  position: relative;
  height: 340px;
}

.oilgas-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oilgas-slide-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  padding: 40px;
    background: linear-gradient(to right, rgb(3 15 54) 0%, rgb(3 15 54 / 55%) 70%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  z-index: 2;
}

.oilgas-slider-dots {
  position: absolute;
  bottom: 20px;
  right: 40px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.oilgas-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.oilgas-dot.active {
  background: #fff;
  width: 32px;
  border-radius: 6px;
}

.oilgas-dot:hover {
  background: #fff;
}

.oilgas-slide-badge {
  display: inline-block;
  background: linear-gradient(135deg, #030f36 0%, #142b78 100%);
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  margin-bottom: 10px;
  width: fit-content;
}

.oilgas-slide-title {
  font-size: 1.8rem;
  margin-bottom: 16px;
  font-weight: 700;
  color: #fff;
}

.oilgas-slide-text {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.9);
}

.oilgas-slide-author {
  font-style: italic;
  font-weight: 600;
  margin-bottom: 4px;
  color: #fff;
}

.oilgas-slide-position {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.oilgas-slide-source {
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 12px;
  margin-top: auto;
}

@media (max-width: 768px) {
.index-php.container.clr.sladder {
    padding: 0 10px;
}
  .oilgas-slide {
    height: 350px;
  }
  
  .oilgas-slide-content {
    width: 100%;
    padding: 25px;
    justify-content: flex-end;
  }
  
  .oilgas-slide-title {
    font-size: 1.4rem;
  }
  
  .oilgas-slide-text {
    font-size: 1rem;
  }
  
  .oilgas-slider-dots {
           display: none;

  }
}
</style>

<div class="oilgas-slider-container">
  <div class="oilgas-slider-wrapper">
    <div class="oilgas-slider-track" id="oilgasSliderTrack"></div>
    <div class="oilgas-slider-dots" id="oilgasSliderDots"></div>
  </div>
</div>

<script>
const oilgasSliderData = [
  { id: 1, type: "fact", title: "Первая скважина", text: "Первая в мире промышленная нефтяная скважина была пробурена не в США, а на Апшеронском полуострове (Азербайджан) в 1846 году — на 13 лет раньше скважины Дрейка в Пенсильвании.", image: "/wp-content/uploads/2026/05/baku-azerbaijan-oil-museum-1.webp", source: "История нефтедобычи" },
  { id: 2, type: "quote", title: "Цитата дня", text: "Нефть — это кровь современной цивилизации", author: "Уинстон Черчилль", image: "/wp-content/uploads/2026/05/2.webp", source: "1943 год" },
  { id: 3, type: "fact", title: "Газовый гигант", text: "Уренгойское месторождение, открытое в 1966 году — третье по величине в мире. Его запасы превышают 10 трлн кубометров газа.", image: "/wp-content/uploads/2026/05/3.webp", source: "Ямало-Ненецкий АО" },
  { id: 4, type: "fact", title: "Арктический рекорд", text: "Платформа Приразломная — единственная в мире стационарная платформа, работающая в условиях арктических льдов в открытом море.", image: "/wp-content/uploads/2026/05/4.webp", source: "Баренцево море" },
  { id: 5, type: "quote", title: "Мнение эксперта", text: "Газ — это не просто топливо, это мост между народами и экономиками", author: "Алексей Миллер", position: "Председатель Правления ПАО Газпром", image: "/wp-content/uploads/2026/05/5.webp", source: "" },
  { id: 6, type: "fact", title: "Нефтяной транзит", text: "Транссибирский нефтепровод (ВСТО) — один из самых длинных в мире: 4 857 км от Тайшета до порта Козьмино.", image: "/wp-content/uploads/2026/05/6.webp", source: "Восточная Сибирь" },
  { id: 7, type: "fact", title: "Цветная нефть", text: "Нефть бывает не только чёрной! В Пенсильвании добывают белую нефть, в Венесуэле — зелёную, а в Индонезии — красную.", image: "/wp-content/uploads/2026/05/7.webp", source: "Интересный факт" },
  { id: 8, type: "fact", title: "Запах газа", text: "Природный газ не имеет запаха. Тот самый газовый запах — это специальный одорант (этилмеркаптан), который добавляют для безопасности.", image: "/wp-content/uploads/2026/05/8.webp", source: "Безопасность" },
  { id: 9, type: "quote", title: "Стратегия", text: "Восточный вектор развития — наш стратегический приоритет на десятилетия вперёд", author: "Игорь Сечин", position: "Председатель Правления ПАО НК Роснефть", image: "/wp-content/uploads/2026/05/9.webp", source: "" },
  { id: 10, type: "fact", title: "СПГ-революция", text: "В 1 тонне сжиженного природного газа (СПГ) — в 600 раз меньше объёма, чем в том же количестве природного газа.", image: "/wp-content/uploads/2026/05/10.webp", source: "Технологии" }
  
];

let oilgasCurrentIndex = 0;
let oilgasAutoplayInterval;
const oilgasAutoplayDelay = 8000;
const oilgasTrack = document.getElementById('oilgasSliderTrack');
const oilgasDotsContainer = document.getElementById('oilgasSliderDots');

function oilgasCreateSlides() {
  oilgasSliderData.forEach((item, index) => {
    const slide = document.createElement('div');
    slide.className = 'oilgas-slide';
    
    let contentHtml = `
      <img src="${item.image}" alt="${item.title}" class="oilgas-slide-image" loading="${index === 0 ? 'eager' : 'lazy'}">
      <div class="oilgas-slide-content">
        <span class="oilgas-slide-badge">${item.type === 'quote' ? 'Цитата' : 'Факт'}</span>
        <h3 class="oilgas-slide-title">${item.title}</h3>
        <p class="oilgas-slide-text">${item.text}</p>`;
    
    if (item.author) {
      contentHtml += `<div class="oilgas-slide-author">— ${item.author}</div>`;
      if (item.position) contentHtml += `<div class="oilgas-slide-position">${item.position}</div>`;
    }
    if (item.source) contentHtml += `<div class="oilgas-slide-source">${item.source}</div>`;
    contentHtml += `</div>`;
    
    slide.innerHTML = contentHtml;
    oilgasTrack.appendChild(slide);
  });
  
  // Создаём точки навигации
  oilgasSliderData.forEach((_, index) => {
    const dot = document.createElement('div');
    dot.className = 'oilgas-dot' + (index === 0 ? ' active' : '');
    dot.addEventListener('click', () => oilgasGoToSlide(index));
    oilgasDotsContainer.appendChild(dot);
  });
}

function oilgasUpdateSlider() {
  oilgasTrack.style.transform = `translateX(-${oilgasCurrentIndex * 100}%)`;
  
  const dots = document.querySelectorAll('.oilgas-dot');
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === oilgasCurrentIndex);
  });
}

function oilgasGoToSlide(index) {
  oilgasCurrentIndex = index;
  oilgasUpdateSlider();
  oilgasResetAutoplay();
}

function oilgasNextSlide() {
  oilgasCurrentIndex = (oilgasCurrentIndex + 1) % oilgasSliderData.length;
  oilgasUpdateSlider();
}

function oilgasPrevSlide() {
  oilgasCurrentIndex = (oilgasCurrentIndex - 1 + oilgasSliderData.length) % oilgasSliderData.length;
  oilgasUpdateSlider();
}

function oilgasStartAutoplay() {
  oilgasAutoplayInterval = setInterval(oilgasNextSlide, oilgasAutoplayDelay);
}

function oilgasStopAutoplay() {
  clearInterval(oilgasAutoplayInterval);
}

function oilgasResetAutoplay() {
  oilgasStopAutoplay();
  oilgasStartAutoplay();
}

const oilgasSliderContainer = document.querySelector('.oilgas-slider-container');
oilgasSliderContainer.addEventListener('mouseenter', oilgasStopAutoplay);
oilgasSliderContainer.addEventListener('mouseleave', oilgasStartAutoplay);

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') { oilgasPrevSlide(); oilgasResetAutoplay(); }
  if (e.key === 'ArrowRight') { oilgasNextSlide(); oilgasResetAutoplay(); }
});

let oilgasTouchStartX = 0;
let oilgasTouchEndX = 0;

oilgasSliderContainer.addEventListener('touchstart', (e) => {
  oilgasTouchStartX = e.changedTouches[0].screenX;
  oilgasStopAutoplay();
}, {passive: true});

oilgasSliderContainer.addEventListener('touchend', (e) => {
  oilgasTouchEndX = e.changedTouches[0].screenX;
  if (oilgasTouchEndX < oilgasTouchStartX - 50) oilgasNextSlide();
  if (oilgasTouchEndX > oilgasTouchStartX + 50) oilgasPrevSlide();
  oilgasStartAutoplay();
}, {passive: true});

oilgasCreateSlides();
oilgasUpdateSlider();
oilgasStartAutoplay();
</script>


</div>