Создание красивого контент-слайдера

Одна из наибольших проблем, стоящих в данный момент перед западной цивилизацией — это как отображать большое количество контента на небольшом пространстве.

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

Чтобы освежить вашу память и дать представление о том, что мы будем создавать, ниже приведен пример контент-слайдера:

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

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

Вперед!

Обзор, как это работает

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

Во-первых, у нас есть контент, который мы хотим загнать в слайдер:

Обзор, как это работает

Контент может быть каким угодно. Это могут быть изображения, стандартный HTML-контент, сочетание нескольких типов контента и т.д. Это на самом деле не имеет значения. Если наш контент может быть уложен в элементы DIV, все в порядке. Вам просто нужно убедиться, что каждый отдельный блок контента имеет одинаковую ширину и высоту.

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

Мы исправим это в два этапа. Во-первых, мы обернём содержимое в контейнер, который имеет такой же размер, как один из блоков контента:

исправим это в два этапа

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

контент в контейнер

Следующим шагом является обеспечение возможности просматривать остальные части контента. Это можно сделать различными способами. В этой статье мы используем набор круглых ссылок, по которым вы можете кликать:

набор круглых ссылок

Последнее, что нужно сделать, чтобы слайдер заработал, это сделать кликабельной каждую ссылку. Для этого потребуются некоторые CSS-хитрости наряду с использованием JavaScript, но ничего слишком сложного. И это, мои дорогие друзья и враги, и весь краткий обзор того, из чего состоит контент-слайдер.

В следующих нескольких разделах мы рассмотрим реальные HTML, CSS и JavaScript коды, которые приведут наш слайдер в действие.

Контент

Давайте следовать тем же шагам, которые мы рассмотрели в кратком обзоре и начнем с … контента. Во-первых, мы должны создать отправную точку. Давайте создадим пустой HTML-документ и добавим в него следующий код из начального шаблона НTML5:

<!DOCTYPE html>
<html>

<head>
<title>An Interesting Title Goes Here</title>

<style>

</style>
</head>

<body>

<script>

</script>
</body>
</html>

Эта разметка не делает ничего, кроме как задает структуру документа, но это первый шаг, который позволит далее добавить наш контент. Давайте сделаем это в следующем разделе.

Контент (на этот раз настоящий)

Внутри элемента body добавьте следующий HTML-код:

<div id="wrapper">
    <div id="itemOne" class="content">

    </div>
    <div id="itemTwo" class="content">

    </div>
    <div id="itemThree" class="content">

    </div>
    <div id="itemFour" class="content">

    </div>
</div>

Между тегами style добавьте следующие правила для стилей, которые задают форму и цвет нашего контента:

#wrapper {
    width: 2200px;
    position: relative;
    left: 0px;
}
.content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
}
#itemOne {
    background-color: #ADFF2F;
    background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
    background-color: #FF7F50;
    background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("http://www.kirupa.com/images/graySquare.png");
}

Теперь при просмотре страницы вы увидите нечто похожее на то, что приведено на скриншоте:

увидите нечто похожее

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

Сейчас уделите немного внимания и постарайтесь понять, почему вы видите то, что вы видите. Просмотрите HTML-разметку и вникните в элементы, которые находятся в вашем документе.

Обратите внимание на значения class и id, которые используются в нем, потому что они будут соответствовать правилам стиля, который вы добавили. Посмотрите на правила стиля, и то, как их визуализация влияет на результат. Теперь давайте резюмируем все это.

Что мы сделали

В нашей HTML-разметке контент, который вы видите, состоит из четырех элементов div, каждый из которых содержит значение класса content. Это значение класса проистекает из правила стиля .content, которое определяет размер каждого блока: 550 пикселей в ширину и 350 пикселей в высоту:

.content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
}

Правило стиля .content также задает значение float — left. В результате элементы div выстраиваются в ряд. И последнее, что это правило стиля объявляет, это свойство white-space. Это свойство определяет, как будет обернут текст в абзаце.

Я применил это свойство просто для удобства. Если вы решите выйти за рамки этой статьи и добавить контент для каждого из элементов div, вы будете только благодарны мне, потому что ваш текст будет обернут надлежащим образом, или удалите это свойство (или установите для него другое значение), если вы не хотите увидеть его.

На данный момент, наш элемент div надлежащим образом подогнан и выстроен. Жаль, что он полностью невидим:

он полностью невидим

Для решения этой проблемы, мы присваиваем каждому div уникальный идентификатор через значения id: itemOne, itemTwo, itemThree, anditemFour. В разделе стилей у нас есть четыре правила стиля, которые соответствуют этим значениям id:

#itemOne {
    background-color: #0099CC;
    background-image: url("http://www.kirupa.com/images/blueSquare.png");
}

#itemTwo {
    background-color: #FFCC00;
    background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}

#itemThree {
    background-color: #FF6666;
    background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}

#itemFour {
    background-color: #E8E8E8;
    background-image: url("http://www.kirupa.com/images/graySquare.png");
}

Как вы можете видеть, эти правила стилей определяют только цвет фона и фоновое изображение для нашего контента. С этого момента элементы div больше не невидимы. Они выводятся в виде прямоугольников разного цвета с размером 550 на 350 пикселей.

Мы почти закончили. Последнее, что мы рассмотрим, это таинственный div, который содержит id wrapper:

<div id="wrapper">
    <div id="itemOne" class="content">

    </div>
    <div id="itemTwo" class="content">

    </div>
    <div id="itemThree" class="content">

    </div>
    <div id="itemFour" class="content">

    </div>
</div>

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

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

Соответствующее правило стилей #wrapper выполняет эту задачу:

#wrapper {
    width: 2200px;
    position: relative;
    left: 0px;
}

Сначала это правило стилей определяет ширину элемента оболочки в 2200 пикселей. То есть общую ширину нашего контента … которую вы получите умножив 4 (по количеству элементов div) на 550 пикселей.

Свойства position и left предназначены для того, чтобы установить возможность переместить контейнер в любое место, куда мы захотим. Установив для свойства position значение relative, мы убираем этот элемент из стандартной структуры документа и делаем возможным разместить его в любом месте с использованием значений в пикселях относительно того места, где он сейчас находится.

Так как наши блоки контента div являются дочерними для этого div, они подтягиваются туда, где размещен родительский div. Как вы понимаете, это очень удобно!

Обрезка контента

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

Вот где нам понадобится основной контейнер. Оберните все элементы div вашего HTML-кода в div с идентификатором contentContainer:

<div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content">

        </div>
        <div id="itemTwo" class="content">

        </div>
        <div id="itemThree" class="content">

        </div>
        <div id="itemFour" class="content">

        </div>
    </div>
</div>

Просто добавьте две новые строки и, если хотите, отступы строк, которые просто предназначены для укладки HTML-кода надлежащим образом.

Сейчас, если вы просмотрите наш обернутый (еще раз) контент, вы не увидите ничего нового. Просто укладка элементов в еще один div ничего значимого не делает — тем более ничего из того, что мы хотим сделать, чтобы обрезать контент.

Чтобы добавить это значимое действие, создайте следующее правило стиля #contentContainer:

#contentContainer {
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}

Обратите внимание, что вы задаете размер элемента contentContainer 550 пикселей на 350 пикселей. То есть точно такой же размер, какой имеет каждый из блоков контента. Чтобы слайдер немного выделялся, мы задаем черную рамку шириной в 5 пикселей.

Последнее, что мы делаем, это обрезаем контент, установив для свойства overflow значение hidden. Это нужно, чтобы скрыть все за пределами элемента contentContainer.

Все вместе дает нам следующую картину в браузере:

картину в браузере

Обратите внимание, что сейчас видно только содержание вашего первого блока. Остальной контент по-прежнему существует, просто сейчас он скрыт вследствие нашей обрезки через значение hidden для свойства overflow.

Ссылки навигации

Вот мы и добрались до них! Мы все ближе к тому, чтобы получить полностью рабочий слайдер. В этом разделе мы займемся ссылками навигации — элементами, которые вы нажимаете, чтобы увидеть другие блоки контента.

Эти ссылки не имеют ничего общего с нашим contentContainer или любой другой частью HTML-кода, который у нас уже есть. Вам нужно добавить выделенные строки в уже имеющийся у нас HTML-код (но выше тега script):

<div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content">

        </div>
        <div id="itemTwo" class="content">

        </div>
        <div id="itemThree" class="content">

        </div>
        <div id="itemFour" class="content">

        </div>
    </div>
</div>
<div id="navLinks">
    <ul>
        <li class="itemLinks" data-pos="0px"></li>
        <li class="itemLinks" data-pos="-550px"></li>
        <li class="itemLinks" data-pos="-1100px"></li>
        <li class="itemLinks" data-pos="-1650px"></li>
    </ul>
</div>

Давайте бегло рассмотрим HTML-код, который вы только что добавили. Во-первых, у нас есть div с идентификатором navLinks, который описывает неупорядоченный список. Сами ссылки представлены в виде пунктов списка.

Каждый элемент списка содержит значение класса itemLinks, а также пользовательский атрибут data-*, называемый data-pos. Мы вернемся к этому атрибуту немного позже, а сейчас просто отметьте для себя, что он существует.

Нам нужно задать стиль для только что добавленного HTML-кода. В разделе стилей добавьте следующие правила:

#navLinks {
    text-align: center;
    width: 550px;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: #CCCCCC;
            padding: 5px;
            border-radius: 50%;
            border: black 5px solid;
        }
            #navLinks ul li:hover {
                background-color: #FFFF00;
            }
            #navLinks ul li.active {
                background-color: #333333;
                color: #FFFFFF;
                outline-width: 7px;
            }
                #navLinks ul li.active:hover {
                    background-color: #484848;
                    color: #FFFFFF;
                }

Ого, сколько CSS. Несмотря на то, что кода много, в нем нет ничего действительно уникального или интересного. Часть CSS-кода обеспечивает создание горизонтального меню со ссылками, выводимыми одна рядом с другой.

Остальной код определяет внешний вид каждой ссылки, а также соответствующее ей выделение при наведении курсора мыши.
На одном моменте все же стоит остановиться подробнее.

Это связано с двумя правилами стилей, которые относятся к классу active:

#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
#navLinks ul li.active:hover {
    background-color: #484848;
    color: #FFFFFF;
}

Если вы помните, в нашем HTML-коде не было элемента, который бы имел значение класса active. Несмотря на это, эти правила стилей все же будут задействованы, потому что класс active добавляется одной из наших ссылок динамически.

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

На данный момент наш слайдер выглядит следующим образом:

На данный момент наш слайдер выглядит следующим образом

Если ваш слайдер выглядит не так, то высока вероятность того, что вы допустили опечатку … или что-то еще. Так и случилось?

Создание самого слайдера

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

Давайте теперь создадим рабочий слайдер, однако перед этим добавим JavaScript и кое-какие крутые элементы… а именно красивые CSS-переходы.

Добавление JavaScript

Внутри тега сценария, добавьте следующие строки JavaScript-кода:

// просто запрашиваем DOM... будто просим разрешение у босса!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// activeLink обеспечивает метку для активного элемента
var activeLink = 0;

// устанавливаем отслеживание событий
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // определяем элемент для activeLink
    link.itemID = i;
}

// устанавливаем первый элемент в качестве активного
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Обработчик изменяет позицию слайдера, после того, как мы убедились,
// что в качестве активной обозначена нужная нам ссылка.
function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}

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

Все, что нам осталось сделать, это обеспечить плавный переход вместо резкой смены слайдов.

Добавление перехода

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

Найдите правило стиля #wrapper и добавьте в него одну строку:

#wrapper {
    width: 2200px;
    position: relative;
    left: 0px;
    transition: left .5s ease-in-out;
}

Строка, которую вы добавили, определяет переход. Свойство, указанное в ней, определяет, что переход должен осуществляться, когда изменяется свойство left. Наш переход будет осуществляться в течение 0,5 секунды, и будет использовать функцию тайминга ease-in-out для ускорения процесса в начале перехода и замедления в конце.

Поскольку свойство transition все еще претерпевает некоторые изменения в W3C, вы должны будете использовать префиксы, чтобы быть уверенными, что любой современный браузер может применить этот переход. Если вы не хотите иметь с этим дело, добавьте следующий скрипт непосредственно перед тегом script:

<script src="http://www.kirupa.com/prefixfree.min.js"></script>

Нет, этот скрипт не делает ничего вредоносного. Это размещенная на хостинге версия библиотеки Леи Веру -prefix-free. Чтобы не изучать кучу всего о том, как работают слайдеры, вы также можете просто скачать ее скрипт, загрузить его на свой собственный сервер и ссылаться на свою собственную версию.

Во всяком случае, если вы сейчас просмотрите документ, вы должны иметь рабочий контент-слайдер, который плавно выводит контент при нажатии на любую из ссылок навигации. Это должно быть идентично тому, что вы видели в примере, размещенном в самом начале этой статьи.

Ну, наконец-то!!!

Разбор кода (и всего остального!)

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

Что на самом деле происходит

После загрузки контент-слайдера вы видите, как отображается первый блок контента. Остальной контент обрезан и скрыт от глаз:

контент обрезан и скрыт от глаз

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

Давайте попробуем разобраться в этой связи. Есть несколько вещей, которые мы знаем. Мы знаем, что каждый из наших блоков контента имеет 550 пикселей в ширину. Мы также знаем, что наш первый блок контента установлен горизонтально на 0 пикселей.

Откуда мы знаем это? Все наши блоки контента обернуты внутри элемента оболочки, который охватывает весь наш контент, и левый край элемента оболочки имеет позицию 0 пикселей:

край элемента оболочки имеет позицию 0 пикселей

Это объявлено в правиле стиля #wrapper. Из этого правила стиля мы также знаем, что все блоки контента смещаются влево и расположены в ряд друг за другом.

Зная это, мы можем вычислить позиции для всех блоков контента следующим образом:

вычислить позиции для всех блоков контента

Первый блок расположен в точке 0 пикселей. Ширина первого блока контента — это позиция второго блока. То есть 550 пикселей. Каждый последующий блок имеет позицию на 550 пикселей больше, чем предыдущий.

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

Атрибут data-pos!

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

Как мы можем указать, что при нажатии на ссылку должен выводиться тот или иной блок контента? Просто. Каждая ссылка содержит точную позицию (в пикселях) блока контента, которому она соответствует:

<div id="navLinks">
    <ul>
        <li class="itemLinks" data-pos="0px"></li>
        <li class="itemLinks" data-pos="-550px"></li>
        <li class="itemLinks" data-pos="-1100px"></li>
        <li class="itemLinks" data-pos="-1650px"></li>
    </ul>
</div>

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

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

Например, вот что происходит после нажатия на третью ссылку:

после нажатия на третью ссылку

Для третьей ссылки определено значение data-pos — 1100 пикселей. Это соответствует тому, на сколько пикселей нужно будет переместить оболочку контейнера, чтобы в видимой области был выведен третий блок контента. Нажатие любой другой ссылки установит для свойства элемента оболочки значение, содержащееся в атрибуте data-pos этой ссылки.

Хорошо, мы разобрались со связью между ссылками и позицией контента, о которой я говорил ранее. Теперь нам осталось только рассмотреть JavaScript, который преобразует все то, о чем я написал в этом разделе в нечто, что будет понятно браузеру.

Это все о JavaScript

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

Начнем с самого верха:

var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

Переменная links принимает набор всех элементов нашего документа, которые имеют значение класса itemLinks. Эти элементы представляют собой пункты списка, которые действуют как ссылки навигации. Переменная wrapper очень похожа на links. Она принимает указатель на элемент с идентификатором wrapper.

querySelector и querySelectorAll

Обратите внимание, как я запрашиваю DOM. Вместо того чтобы, использовать что-то вроде getElementsByClassName или getElementById, я использую новые функции querySelectorAll и querySelector.

Вы увидите, что обе эти переменные мы будем использовать позже, так что помните о них.

Дальше у нас следует кое-что таинственное:

var activeLink = 0;

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

Следующий набор строк — это цикл for:

// установка отслеживания событий
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);
}

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

Следующая строка вызывает целый ряд изменений:

// установка первого элемента в качестве активного
 links[activeLink].classList.add("active");

Мы добавляем значение активного класса к элементу первой ссылки навигации. Это делается через передачу значения activeLink в массив links. Так как activeLink равно 0, обычно массив принимает первый элемент и, используя classList API, добавляет значение класса active.

После того, как выполнена эта строка кода, помните, мы обращали внимание на следующие правила стиля?

#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
    #navLinks ul li.active:hover {
        background-color: #484848;
        color: #FFFFFF;
    }

Что ж, теперь эти правила стиля вступают в действие и помогают выделить активную ссылку навигации из списка других неактивных ссылок. Немного позже мы вернемся к этим правилам стиля и рассмотрим их более подробно.

Следующее, что мы рассмотрим, это обработчик событий setClickedItem, который вызывается при нажатии на любую из ссылок:

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

Эта функция сначала переключает состояние всех ваших ссылок на неактивное с помощью вызова removeActiveLinks. Мы рассмотрим эту функцию чуть позже.

Другая важная вещь, которую делает эта функция, это то, что она изменяет на activeLink значение свойства itemID выбранного элемента. Это обеспечивает то, что activeLink всегда указывает на номер, который соответствует блоку контента, выводимому в данный момент в слайдере.

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

Вот, где происходят интересные изменения! Давайте немного перепрыгнем вперед и рассмотрим функцию changePosition:

// Обработчик изменяет позицию слайдера, после того, как мы убедились,
// что в качестве активной обозначена нужная нам ссылка.
function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}

Эта функция делает две вещи:
І. Переключает визуальное отображение выбранной ссылки, чтобы указать, что в настоящее время она является активной.
II. Устанавливает позицию элемента оболочки.

Давайте рассмотрим эти две вещи более подробно.

Переключение визуального отображения выбранной/активной ссылки

Чтобы вам было понятнее, то о чем я говорил перед этим, ваши ссылки навигации могут быть в одном из двух состояний. Эти состояния предназначены для того, чтобы пользователь видел, какой блок контента в настоящее время является активным:

Переключение визуального отображения

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

Это изменение визуального отображения осуществляется путем добавления и удаления классов CSS. Класс active добавляется активной ссылке. Все ссылки, которые не являются активными, не содержат значения класса active. Вы поймете, как это работает, когда мы рассмотрим функцию removeActiveLinks.

В любом случае вы помните, что ранее мы вызвали следующие два правила стиля:

#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
    #navLinks ul li.active:hover {
        background-color: #484848;
        color: #FFFFFF;
    }

Эти правила стилей применяются только к ссылке, которой был добавлен класс active. Когда пользователь нажимает на любую ссылку, значение этого класса добавляется и удаляется через JavaScript.

В нашей функции setClickedItem (также известной, как функция, которая будет вызываться в результате нажатия на ссылку), мы сначала вызываем removeActiveLinks:

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

Эта функция отвечает за удаление класса active для всех ссылок навигации:

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

Вы можете представить ее, как глобальную кнопку сброса. Она перебирает ссылки навигации, которые хранятся в переменной ссылок и удаляет значение класса active, используя classList.remove(). Просто имейте в виду, что если любая из ссылок навигации содержала значение класса active, что ж … больше его не будет.

Таким образом, мы рассмотрели, как удалить класс active у всех ваших ссылок. Добавление класса в свою очередь происходит очень просто:

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

Тот же ClassList, который мы использовали ранее для удаления значения активного класса, мы используем, чтобы обратно добавить значения класса active выбранной ссылке. Эта выбранная ссылка получает аргумент link, который передается ей.

Установка позиции оболочки

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

Давайте рассмотрим следующий фрагмент:

function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}

Переменная position хранит значение атрибута data-pos нажатой нами ссылки. После того, как мы получили значение атрибута data-pos, мы устанавливаем для свойства CSS left элемента оболочки то же самое значение.

Как это связано с реализацией эффекта слайдера? Вы помните, что некоторое время назад мы добавили к стилю #wrapper одно правило?

#wrapper {
    width: 2200px;
    position: relative;
    left: 0px;
    transition: left .5s ease-in-out;
}

Обратите внимание, что мы определили для transition вступать в действие, когда изменяется свойство left. Угадайте, что делает наш JavaScript? Задает свойство left! CSS-переход обнаруживает это изменение и запускает перемещение контента. Все, что вам нужно, чтобы заставить все это работать, это добавить одну строку JavaScript.

Я не знаю, как насчет вас, но для меня это просто удивительно. Это то, что мы не могли себе представить несколько лет назад, когда нам приходилось прилагать много усилий и писать код для обработки эффекта слайдера. Это то, что делает наш контент-слайдер красивым.

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

Улучшение контент-слайдера

Слайдер контента, который мы только что создали, довольно крут, но можно сделать его еще круче. В этом разделе мы рассмотрим два улучшения, которые могут оказаться вам очень полезными. Попутно мы узнаем некоторые новые трюки JavaScript и CSS. Это будет, как говорит сейчас молодежь: «Я рыдаю!».

Прокручивание с помощью преобразования translate3d

В данный момент наши слайды прокручиваются с помощью изменения значения свойства CSS left, которое применяется к элементу div wrapper. Используя свойство left, мы заставляем слайдер работать, однако этот метод имеет серьезные недостатки. Вы не можете использовать аппаратное ускорение, чтобы обеспечить плавную смену слайдов.

Это особенно актуально для мобильных устройств, при низкой скорости Интернет-соединения часто использующих аппаратные средства, и здесь прерывистая, скачкообразная смена слайдов может быть особенно заметной.

Это можно исправить с помощью функции translate3d transform, которая заставит слайды перемещаться плавно. Эта функция принимает в качестве аргументов значения х, y и z, и изменение любого из этих значений приведет к изменению позиции целевого элемента.

Особенностью данной функции является также то, что в результате ее использования браузер аппаратно ускоряет изменение позиции. Чего же мы ждем?

Первое, что нам нужно сделать, это изменить правило стиля #wrapper. Замените объявление свойств position и left следующим кодом:

#wrapper {
    width: 2200px;
    transform: translate3d(0, 0, 0);
    transition: left .5s ease-in-out;
}

Таким образом, с помощью transform задается исходная позиция элемента оболочки.

Далее нам нужно изменить JavaScript и установить вместо свойства left функцию translate3d transform. Мы осуществим это в два этапа.

Первый этап: Добавление вспомогательных элементов

На первом этапе добавляем следующий вспомогательный код ниже основного кода, который мы имеем на текущий момент:

//
// Использование преобразований
//
var transforms = ["transform",
            "msTransform",
            "webkitTransform",
            "mozTransform",
            "oTransform"];

var transformProperty = getSupportedPropertyName(transforms);

// управление вендорными префиксами
function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}

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

В этой статье я не буду пояснять данные строки. Единственное, что вам нужно знать, это то, что весь этот код помогает установить для свойства Property значения transform, msTransform, mozTransform или oTransform. В зависимости от того, насколько старый браузер вы используете, будет использоваться одно из этих значений.

Второй этап: внесение Ahoy!

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

В функции changePosition найдите следующие строки кода:

function changePosition(link) {
    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;

    link.classList.add("active");
}

Замените их следующим кодом:

function changePosition(link) {
    var position = link.getAttribute("data-pos");

    var translateValue = "translate3d(" + position + ", 0px, 0)";
    wrapper.style[transformProperty] = translateValue;

    link.classList.add("active");
}

Этот код делает довольно простые вещи. Переменная translateValue создает представление на основе строк функции translate3d, в котором часть X заполняется значением переменной position. После того, как эта строка была создана, все, что нам осталось сделать, это передать ее в объект style элемента wrapper.

Обратите внимание, что определение соответствующего свойства стиля обрабатывается переменной transformProperty, которую мы уже рассмотрели чуть ранее.

Если вы теперь просмотрите документ, то увидите, что блоки контента в слайдере перепрыгивают с одного места в другое.

Очевидно, что не это вы ожидали увидеть. Что случилось с плавным перемещением? Ответ заключается в том, что нам недостает еще одного изменения. К счастью, это легко исправить. Если мы вернемся к правилу стиля #wrapper, то заметим, что объявление transition выглядит следующим образом:

#wrapper {
    width: 2200px;
    transform: translate3d(0, 0, 0);
    transition: left .5s ease-in-out;
}

Наш переход отслеживает изменения свойства left. Мы больше не используем это свойство, поэтому наш переход и не может начать работать. Чтобы исправить эту ужасную несправедливость, замените ключевое слово свойства left внутри объявления transition на ключевое слово свойства transform:

#wrapper {
    width: 2200px;
    transform: translate3d(0, 0, 0);
    transition: transform .5s ease-in-out;
}

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

Разница заключается только в том, что при смене слайдов теперь используется аппаратное ускорение, и она будет происходить теперь более плавно и поддерживаться на большем количестве устройств.

Автоматическая смена слайдов с интервалом в несколько секунд

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

Пример одного из таких контент-слайдер вы видите ниже:

<iframe src="http://www.kirupa.com/snippets/examples/content_slider_v2.htm"; style="width: 575px;height: 430px;border: none;"></iframe>

Да, это наш старый слайдер, в который внесены небольшие изменения, чтобы контент мог автоматически прокручиваться в контейнере. Угадайте, что мы будем делать дальше?

Заставим слайды прокручиваться автоматически!

В этом нам поможет функции setInterval. Основная задача этой функции — обеспечить выполнение кода через равные промежутки времени:

window.setInterval(functionToCall, delay);

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

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

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

//
// Код для автоматической смены слайдов
//
var timeoutID;

function startTimer() {
    // ожидание в течение 2 секунд перед вызовом goInactive
    timeoutID = window.setInterval(goToNextItem, 2000);
}
startTimer();

function resetTimer() {
    window.clearInterval(timeoutID);
    startTimer();
}

function goToNextItem() {
    removeActiveLinks();

    if (activeLink < links.length - 1) {
        activeLink++;
    } else {
        activeLink = 0;
    }

    var newLink = links[activeLink];
    changePosition(newLink);
}

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

Существует только одно значительное изменение, которое нам осталось внести. Сейчас слайды сменяют друг друга каждые две секунды, независимо от того, нажали ли вы ссылку навигации или нет.

Правильнее будет сделать так, чтобы после нажатия одной из ссылок таймер сбрасывался на 0. Чтобы внести это изменение, добавьте следующую строку кода в обработчик событий setClickedItem:

function setClickedItem(e) {
    removeActiveLinks();
    resetTimer();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

После этого контент-слайдер будет вести себя должным образом, когда вы вмешиваетесь и нажимаете на ссылку навигации. Ура!

Пояснение автоматической смены слайдов

Итак, нам осталось разобраться только с одной вещью. Давайте быстро рассмотрим код, который мы только что добавили, и поймем, почему он делает то, что он делает.

Начнем с функции goToNextItem/span>:

function goToNextItem() {
    removeActiveLinks();

    if (activeLink < links.length - 1) {
        activeLink++;
    } else {
        activeLink = 0;
    }

    var newLink = links[activeLink];
    changePosition(newLink);
}}

Эта функция отвечает за отслеживание контента, который отображается в данный момент, и того, что последует за ним. Чтобы лучше понять, что происходит, взгляните на приведенное ниже изображение:

функция отвечает за отслеживание контента

Переменная activeLink указывает на положение текущего отображаемого блока контента. Каждая часть информации связана с соответствующим элементом внутри массива links.

Общее количество элементов внутри массива links может быть установлено через свойство length. Теперь давайте вернемся к нашему коду.

Оператор if функции goToNextItem просто проверяет, остался ли еще контент или слайдеру следует вернуться в начало:

if (activeLink < links.length - 1) {
    activeLink++;
} else {
    activeLink = 0;
}

Если вы внимательно присмотритесь к диаграмме и коду, то поймете логику. В принципе, как только мы получили правильное значение для activeLink, все остальное в нашем слайдере будет просто работать благодаря магии.

Сама магия выполняется с помощью следующих двух строк, предоставляемых функцией changePosition, которая в свою очередь вызывается с указателем на следующий блок контента для вывода:

var newLink = links[activeLink];
changePosition(newLink);

В данный момент путь, по которому обрабатывается наш код, ничем не отличается от того, как он обрабатывался при нажатии на ссылку вручную.

Итак … мы рассмотрели код в функции goToNextItem для перемещения к следующей части контента. Чтобы вызвать этот слайд автоматически задействуются следующие строки:

var timeoutID;

function startTimer() {
    // ожидание в течение 2 секунд перед вызовом goInactive
    timeoutID = window.setInterval(goToNextItem, 2000);
}
startTimer();

function resetTimer() {
    window.clearInterval(timeoutID);
    startTimer();
}

Для запуска используется функция startTimer. Эта функция содержит вызов setInterval, который обеспечивает, чтобы функция goToNextItem вызывалась каждые 2 секунды (или 2000 миллисекунд).

Просто добавив эту функцию (и вызвав ее), вы заставите ваш контент-слайдер начать автоматически прокручивать блоки контента.

Осталось только разобраться с тем, как сбрасывается таймер (который я назвал setInterval), когда вы вручную нажимаете ссылку. Чтобы справиться с этим, задействуется оставшийся у нас код.

Метод, с помощью которого сбрасывается таймер, заключается в следующем: мы останавливаем функцию setInterval, а затем запускаем ее снова. С тем как это делается, возможно, будет немного сложно разобраться.

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

Этот идентификатор мы сохраняем в переменной timeoutID и инициализируем в вызове startTimer, и этот же идентификатор удобно использовать внутри функции resetTimer:

function resetTimer() {
    window.clearInterval(timeoutID);
    startTimer();
}

Функция clearInterval принимает идентификатор (через timeoutID) функции setInterval, которую мы хотим остановить.

После того, как мы остановили таймер внутри функции resetTimer, мы вызываем startTimer и начинаем все это снова:

function resetTimer() {
    window.clearInterval(timeoutID);
    startTimer();
}

Логика проста. Таймер останавливается, когда вы вручную выбираете, какой блок контента нужно вывести в слайдере:

function setClickedItem(e) {
    removeActiveLinks();
    resetTimer();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

После того как вы выбираете новый блок контента, слайдер останавливается на две секунды, прежде чем перейти к следующему блоку. Отслеживание всего этого осуществляют функции startTimer и resetTimer.

Заключение

Вот и все, мы рассмотрели, как создать красивый контент-слайдер, используя только

HTML

,

CSS

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

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

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

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

Перевод статьи «Creating a Sweet Content Slider» был подготовлен дружной командой проекта Сайтостроение от А до Я.