Как сделать автоматический слайдер фона и по кнопкам?

Question

хочу сделать слайдер, его задача заключается в том, чтобы автоматически и по кнопкам менять фон. То есть весь контент должен оставаться, меняться должен только фон. С помощью чистого JavaScript`a хотел сделать через setinterval менять изображении и через две кнопки. Но у меня ничего не получается... Я обращаюсь сюда с целью помощи по ДжаваСкрипту, помогите реализовать данный скрипт...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    header {
        width: 100%;
        height: 600px;
        color: white; 
        background: url('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg');
        background-size: cover;
    }
</style>
<body>

    <header>
        <button class="back">назад</button>
        <button class="forward">вперед</button>
        <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo possimus magni, ducimus numquam eligendi doloremque fugit voluptatum, repellendus molestiae alias nam nesciunt recusandae? Esse labore repudiandae quidem ipsum animi temporibus.</p>
    </header>
    
</body>
</html>

Answer 1

Я бы сделал как то так:

// Создаем массив с адресами изображений
const images = [
  'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg',
  'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__341.jpg',
  'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__342.jpg',
  'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__343.jpg',
  'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__344.jpg',
  'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__345.jpg',
  'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__346.jpg',
];

// Определяем необходимые узлы в DOM
const header = document.querySelector('header');
const forward = document.querySelector('.forward');
const back = document.querySelector('.back');

// Инициализируем текущий элемент массива, то есть какое изображение показывать
let currentImage = 0;

// Функция которая задает фоновое изображение в зависимости от переданого индекса из массива
function setBgImage(idx){
  header.setAttribute('style', `background-image: url('${images[idx]}')`);
}

// Функция увеличивающая текущий элемент на 1. 
// Проверяем не больше ли он чем всего элементов в массиве, если больше обнуляет его
// И вызывает функцию смены изображения
function increment(){
  currentImage++;
  currentImage = (currentImage === images.length) ? 0 : currentImage; 
  setBgImage(currentImage);
}

// Тоже самое но на уменьшение текущего элемента
function decrement(){
  currentImage--;
  currentImage = (currentImage < 0) ? images.length-1 : currentImage; 
  setBgImage(currentImage);
}

// Обработчики кликов по кнопкам
forward.addEventListener('click', e => increment());
back.addEventListener('click', e => decrement());

// Смена изображения через интервал
setInterval(function(){
  increment();
}, 10000)

// Вызов функции для первоначальной отрисовки
setBgImage(currentImage);

БЛОГ НА HUSL

Как сделать автоматический слайдер фона и по кнопкам?

Ответы (1 шт):