Как создать простое полноэкранное слайд-шоу с помощью Vanilla JavaScript

От автора: в этом руководстве вы узнаете, как создать адаптивное полноэкранное слайд-шоу с помощью обычного JavaScript. Чтобы построить его, мы используем несколько различных трюков с интерфейсом. В качестве бонуса мы пойдем на шаг дальше и настроим внешний вид курсора при наведении его на слайд-шоу.

Как обычно, чтобы получить первоначальное представление о том, что мы будем создавать, взгляните на соответствующую демонстрационную версию CodePen (посмотрите более крупную версию для лучшего понимания):

Примечание. В этом руководстве не рассматривается, как сделать слайд-шоу более доступным (например, кнопки). В основном мы сосредоточимся на CSS и JavaScript.

1. Начните с разметки страницы

Для создания слайд-шоу нам понадобится элемент с классом slideshow. В нем мы разместим список слайдов вместе со стрелками навигации.

Каждый слайд будет содержать фоновое изображение. Конечно, если вам нравится, вы можете добавлять дополнительный контент.

По умолчанию отображается первый слайд. Но мы можем настроить это поведение, прикрепив к нужному слайду класс is-active. Вот необходимая разметка:

<div class="slideshow"> <ul class="slides"> <li class="slide is-active"> <div class="cover" style="background-image: url(IMG_SRC);"></div> </li> <li class="slide"> <div class="cover" style="background-image: url(IMG_SRC);"></div> </li> <li class="slide"> <div class="cover" style="background-image: url(IMG_SRC);"></div> </li> </ul> <div class="arrows"> <button class="arrow arrow-prev"> <span></span> </button> <button class="arrow arrow-next"> <span></span> </button> </div>
</div>
<main>...</main>

2. Определите стили

Когда разметка будет готова, мы продолжим работу с основными стилями слайд-шоу.

Компоновка слайдов

По умолчанию все слайды будут накладываться друг на друга. Все они будут скрыты, кроме активного. Чтобы сложить изображения, мы воспользуемся CSS Grid. Фактически, я уже рассмотрел эту технику и ее преимущества по сравнению с традиционным позиционированием в недавнем руководстве. Вот связанные стили:

.slideshow .slides { display: grid;
} .slideshow .slide { grid-column: 1; grid-row: 1; opacity: 0; transition: opacity 0.4s;
} .slideshow .slide.is-active { opacity: 1;
}

Каждый div внутри слайда получит свой класс cover. Это преобразует его фоновое изображение в полноэкранное фоновое изображение:

.cover { background-size: cover; background-repeat: no-repeat; background-position: center; height: 100vh;
}

Навигация

Кнопки навигации будут расположены абсолютно внутри слайд-шоу. Каждая из кнопок должна покрывать половину ширины слайд-шоу, а их высота должна быть равна высоте слайд-шоу.

Изначально все кнопки будут скрыты. Но когда мы начнем перемещать курсор внутри слайд-шоу, появится соответствующая кнопка в зависимости от положения мыши. Каждый span внутри кнопки будет иметь стрелку (влево или вправо) в качестве фонового изображения.

По умолчанию цвет этих стрелок будет черным. Однако при перемещении курсора внутри слайд-шоу их цвет должен измениться и создать контраст по отношению к слайд-изображениям. Хитрость для создания этого эффекта заключается в добавлении к спанам mix-blend-mode: difference (или exclusion) и filter: invert(1).

Далее, стили для навигации:

.slideshow { cursor: none;
} .slideshow .arrows { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; overflow: hidden;
} .slideshow .arrows .arrow { position: relative; width: 50%; cursor: inherit; visibility: hidden; overflow: inherit;
} .slideshow .arrows .is-visible { visibility: visible;
} .slideshow .arrows span { position: absolute; width: 72px; height: 72px; background-size: 72px 72px; mix-blend-mode: difference; filter: invert(1);
} .slideshow .arrow-prev span { background-image: url(slider-prev-arrow.svg);
} .slideshow .arrow-next span { background-image: url(slider-next-arrow.svg);
}

3. Добавьте JavaScript

Давайте теперь добавим к нашему слайд-шоу интерактивные функции! В этом примере в слайд-шоу будут включены три параметра по умолчанию, которые мы можем настроить, указав соответствующие настраиваемые атрибуты:

Переменные

Прежде чем приступить к изучению этих параметров, в качестве первого шага мы определим группу переменных, которые будем использовать позже:

const slideshow = document.querySelector(".slideshow");
const list = document.querySelector(".slideshow .slides");
const btns = document.querySelectorAll(".slideshow .arrows .arrow");
const prevBtn = document.querySelector(".slideshow .arrow-prev");
const prevBtnChild = document.querySelector(".slideshow .arrow-prev span");
const nextBtn = document.querySelector(".slideshow .arrow-next");
const nextBtnChild = document.querySelector(".slideshow .arrow-next span");
const main = document.querySelector("main");
const autoplayInterval = parseInt(slideshow.dataset.autoplayInterval) || 4000;
const isActive = "is-active";
const isVisible = "is-visible";
let intervalID;

Инициализация вещей

Когда все ресурсы страницы будут готовы, мы вызовем функцию init.

window.addEventListener("load", init);

Эта функция запустит четыре подфункции:

function init() { changeSlide(); autoPlay(); stopAutoPlayOnHover(); customizeArrows();
}

Как мы увидим через минуту, каждая из этих функций будет выполнять определенную задачу.

Цикл слайдов

Функция changeSlide будет отвечать за цикл слайдов. При каждом нажатии кнопки мы будем выполнять следующие действия:

Вот эта функция:

// variables here function changeSlide() { for (const btn of btns) { btn.addEventListener("click", e => { // 1 const activeSlide = document.querySelector(".slide.is-active"); // 2 activeSlide.classList.remove(isActive); // 3 if (e.currentTarget === nextBtn) { activeSlide.nextElementSibling ? activeSlide.nextElementSibling.classList.add(isActive) : list.firstElementChild.classList.add(isActive); } else { // 4 activeSlide.previousElementSibling ? activeSlide.previousElementSibling.classList.add(isActive) : list.lastElementChild.classList.add(isActive); } }); }
}

Автопроигрывание

Функция autoplay будет отвечать за активацию режима автозапуска. По умолчанию мы должны вручную перемещаться по слайдам. Чтобы активировать автопроигрывание, мы добавим для слайд-шоу атрибут data-autoplay=»true».

Мы также можем настроить интервал между переключениями слайдов, определив data-autoplay-interval=»number» (по умолчанию 4000 мс) в качестве второго атрибута, например:

<div class="slideshow" data-autoplay="true" data-autoplay-interval="6000"> ...
</div>

Вот эта функция:

// variables here function autoPlay() { if (slideshow.dataset.autoplay === "true") { intervalID = setInterval(() => { nextBtn.click(); }, autoplayInterval); }
}

Остановка автопроигрывания

Функция stopAutoplayOnHover будет отвечать за отключение режима автопроигрывания при наведении. Чтобы включить эту функцию, мы передадим атрибут data-stop-autoplay-on-hover=»true», например, так:

<div class="slideshow" data-stop-autoplay-on-hover="true"> ...
</div>

Вот эта функция:

// variables here function stopAutoPlayOnHover() { if ( slideshow.dataset.autoplay === "true" && slideshow.dataset.stopAutoplayOnHover === "true" ) { slideshow.addEventListener("mouseenter", () => { clearInterval(intervalID); }); // touch devices slideshow.addEventListener("touchstart", () => { clearInterval(intervalID); }); }
}

Настройка стрелок

Функция customizeArrows будет отвечать за управление видимостью кнопок навигации и положения их спанов. Как мы уже говорили, кнопки навигации изначально будут скрыты.

Когда мы перемещаем мышь внутри слайд-шоу, только одна из них будет отображаться одновременно в зависимости от положения мыши. Положение ее элемента span также будет зависеть от координат указателя мыши.

Как только мы покинем слайд-шоу, кнопки снова станут скрытыми. Чтобы выполнить эти требования на различных экранах / устройствах, мы будем использовать два события мыши и два события касания. Вот код, который реализует этот функционал:

// variables here function customizeArrows() { slideshow.addEventListener("mousemove", mousemoveHandler); slideshow.addEventListener("touchmove", mousemoveHandler); slideshow.addEventListener("mouseleave", mouseleaveHandler); main.addEventListener("touchstart", mouseleaveHandler);
} function mousemoveHandler(e) { const width = this.offsetWidth; const xPos = e.pageX; const yPos = e.pageY; const xPos2 = e.pageX - nextBtn.offsetLeft - nextBtnChild.offsetWidth; if (xPos > width / 2) { prevBtn.classList.remove(isVisible); nextBtn.classList.add(isVisible); nextBtnChild.style.left = `${xPos2}px`; nextBtnChild.style.top = `${yPos}px`; } else { nextBtn.classList.remove(isVisible); prevBtn.classList.add(isVisible); prevBtnChild.style.left = `${xPos}px`; prevBtnChild.style.top = `${yPos}px`; }
} function mouseleaveHandler() { prevBtn.classList.remove(isVisible); nextBtn.classList.remove(isVisible);
}

Заключение

Вот и все, ребята! В этом руководстве нам удалось реализовать гибкое полноэкранное слайд-шоу, написав код на чистом JavaScript. Надеюсь, вам понравилось это путешествие и вы получили новые знания!

Автор: George Martsoukos

Источник: https://webdesign.tutsplus.com

Редакция: Команда webformyself.