Как сделать ссылки в слайдере
Создаем свой слайдер для сайта
Если поверхности ресурса катастрофически не хватает, а показать пользователям есть что, то нужно копать вглубь. Или просто прокрутить эту поверхность. В такой ситуации и потребуется слайдер для сайта:
Что такое слайдер
Слайдер представляет собой определенный участок дизайна страницы, на котором в автоматическом, ручном или смешанном режиме происходит смена картинок. Также в качестве содержимого слайдеров для сайта могут выступать текстовый или медийный контент.
В обычный слайдер вшито 5-7 поочередно меняющихся картинок. Чаще всего смена графических объектов инициируется действием пользователя. Встречаются гибридные образцы, сочетающие в себе ручной и автоматический режим переключения.
Слайдеры могут обладать различной структурой пользовательского интерфейса. В качестве переключателей могут использоваться кнопки, ссылки или чекбоксы. Смена картинок может сопровождаться медленным затуханием прозрачности, частичным перекрытием изображений и другими визуальными эффектами:
С точки зрения психологии, визуальное представление товара в нескольких ракурсах во много раз увеличивает вероятность покупки:
Несколько слайдеров, популярных в сети:
На чем пишутся слайдеры?
По архитектуре построения слайдер располагается ближе всего к веб-приложению, работа которого осуществляется на клиентской машине. Скрипт слайдера загружается браузером вместе с основным кодом страницы. Стиль может задаваться внутри кода. Но чаще всего характеристики внешнего вида устанавливаются с помощью каскадных таблиц стилей ( CSS ).
Ссылку можно легко поменять на html кнопку:
Вот пример карусели на ее основе. Смена картинок происходит автоматически:
Во всемирной паутине легко найти множество ресурсов, с которых можно скачать уже готовый код продвинутой карусели.
Решение вопроса
Перед тем, как сделать слайдер на сайте, объективно оцените свои возможности. Если практических навыков в веб-программировании явно недостаточно, то лучше пойти по пути меньшего сопротивления. То есть, использовать уже готовое решение.
Рассмотренные в данной статье примеры помогут разобраться в чужом коде, и настроить работу слайдера под свой сайт.
Создание красивого контент-слайдера
Одна из наибольших проблем, стоящих в данный момент перед западной цивилизацией — это как отображать большое количество контента на небольшом пространстве.
Одно из эффективных решений заключается в размещении контента в последовательно выводимых блоках, используя то, что известно в отрасли ( и в сетевом сообществе ) под названием контент-слайдер. Вы, возможно, не слышали о нем, но я готов поспорить, что вы определенно должны были его видеть.
Чтобы освежить вашу память и дать представление о том, что мы будем создавать, ниже приведен пример контент-слайдера :
Кликните кружочки-ссылки ниже контейнера изображений, чтобы увидеть, как слайдер работает. В зависимости от того, какую ссылку вы нажмете, в контейнере будет выводиться соответствующий ей контент.
Обзор, как это работает
Во-первых, у нас есть контент, который мы хотим загнать в слайдер:
При просмотре слайдера, вы видите одновременно только один блок контента. Если не предпринять дополнительных шагов, то выводимый одновременно контент в своем оригинальном размере может превратить слайдер во что-то очень визуально непривлекательное.
Мы исправим это в два этапа. Во-первых, мы обернём содержимое в контейнер, который имеет такой же размер, как один из блоков контента:
Контент
Эта разметка не делает ничего, кроме как задает структуру документа, но это первый шаг, который позволит далее добавить наш контент. Давайте сделаем это в следующем разделе.
Контент (на этот раз настоящий)
Между тегами style добавьте следующие правила для стилей, которые задают форму и цвет нашего контента:
Теперь при просмотре страницы вы увидите нечто похожее на то, что приведено на скриншоте:
Что мы сделали
На данный момент, наш элемент div надлежащим образом подогнан и выстроен. Жаль, что он полностью невидим:
Как вы можете видеть, эти правила стилей определяют только цвет фона и фоновое изображение для нашего контента. С этого момента элементы div больше не невидимы. Они выводятся в виде прямоугольников разного цвета с размером 550 на 350 пикселей.
Этот элемент обертывает весь наш контент в один контейнер. Это не тот контейнер, который я имел в виду в обзоре, когда говорил об обрезании всего содержимого вокруг блоков контента.
Этот контейнер предназначен немного для другого. Он в буквальном смысле просто оборачивает контент для того, чтобы мы могли просматривать его весь.
Соответствующее правило стилей #wrapper выполняет эту задачу:
Сначала это правило стилей определяет ширину элемента оболочки в 2200 пикселей. То есть общую ширину нашего контента … которую вы получите умножив 4 ( по количеству элементов div ) на 550 пикселей.
Обрезка контента
В предыдущем разделе, мы позаботились о получении блоков контента, которые будут выводиться. Следующее, что мы собираемся сделать, это обрезать наш контент, таким образом, чтобы в любой момент времени был виден только один блок слайдера.
Сейчас, если вы просмотрите наш обернутый ( еще раз ) контент, вы не увидите ничего нового. Просто укладка элементов в еще один div ничего значимого не делает — тем более ничего из того, что мы хотим сделать, чтобы обрезать контент.
Чтобы добавить это значимое действие, создайте следующее правило стиля #contentContainer :
Обратите внимание, что вы задаете размер элемента contentContainer 550 пикселей на 350 пикселей. То есть точно такой же размер, какой имеет каждый из блоков контента. Чтобы слайдер немного выделялся, мы задаем черную рамку шириной в 5 пикселей.
Все вместе дает нам следующую картину в браузере:
Ссылки навигации
Вот мы и добрались до них! Мы все ближе к тому, чтобы получить полностью рабочий слайдер. В этом разделе мы займемся ссылками навигации — элементами, которые вы нажимаете, чтобы увидеть другие блоки контента.
Остальной код определяет внешний вид каждой ссылки, а также соответствующее ей выделение при наведении курсора мыши.
На одном моменте все же стоит остановиться подробнее.
Это связано с двумя правилами стилей, которые относятся к классу active :
Если сейчас вам трудно во всем этом разобраться, не волнуйтесь, очень скоро мы рассмотрим это подробно.
На данный момент наш слайдер выглядит следующим образом:
Создание самого слайдера
Хорошо, на данный момент у нас есть что-то, что выглядит очень похоже на рабочий слайдер. Однако при нажатии любой из ссылок абсолютно ничего не происходит.
Добавление JavaScript
После того, как вы добавили этот код, просмотрите документ в браузере и нажмите на любую из ссылок-кружков. Вы увидите, что в слайдере выводится контент, соответствующий этой ссылке. Конечно, это уже огромный прогресс.
Все, что нам осталось сделать, это обеспечить плавный переход вместо резкой смены слайдов.
Добавление перехода
Найдите правило стиля #wrapper и добавьте в него одну строку:
Во всяком случае, если вы сейчас просмотрите документ, вы должны иметь рабочий контент-слайдер, который плавно выводит контент при нажатии на любую из ссылок навигации. Это должно быть идентично тому, что вы видели в примере, размещенном в самом начале этой статьи.
Разбор кода (и всего остального!)
Теперь, когда у нас есть работающий контент-слайдер, давайте попробуем разобраться с самого начала, как код связывает все это вместе.
Что на самом деле происходит
После загрузки контент-слайдера вы видите, как отображается первый блок контента. Остальной контент обрезан и скрыт от глаз:
Давайте попробуем разобраться в этой связи. Есть несколько вещей, которые мы знаем. Мы знаем, что каждый из наших блоков контента имеет 550 пикселей в ширину. Мы также знаем, что наш первый блок контента установлен горизонтально на 0 пикселей.
Откуда мы знаем это? Все наши блоки контента обернуты внутри элемента оболочки, который охватывает весь наш контент, и левый край элемента оболочки имеет позицию 0 пикселей:
Зная это, мы можем вычислить позиции для всех блоков контента следующим образом:
Так как мы знаем точное положение в пикселях каждого блока контента, мы можем использовать эту информацию, чтобы указать контент-слайдеру сдвинуть элемент оболочки в нужное место, так чтобы была видна нужная нам часть контента.
Атрибут data-pos!
Прекрасно, теперь нам известны позиции всех блоков контента. Что мы еще не рассмотрели, так это как знание позиции блока контента в пикселях поможет нам вывести в окне слайдера нужный блок.
Как мы можем указать, что при нажатии на ссылку должен выводиться тот или иной блок контента? Просто. Каждая ссылка содержит точную позицию ( в пикселях ) блока контента, которому она соответствует:
Например, вот что происходит после нажатия на третью ссылку:
Это все о JavaScript
Начнем с самого верха:
querySelector и querySelectorAll
Вы увидите, что обе эти переменные мы будем использовать позже, так что помните о них.
Дальше у нас следует кое-что таинственное:
Переменная activeLink используется для хранения позиции контента, отображаемого в данный момент. Вы лучше поймете смысл этой переменной, когда я поясню ее в действии чуть позже.
Следующий набор строк — это цикл for:
Следующая строка вызывает целый ряд изменений:
После того, как выполнена эта строка кода, помните, мы обращали внимание на следующие правила стиля?
Что ж, теперь эти правила стиля вступают в действие и помогают выделить активную ссылку навигации из списка других неактивных ссылок. Немного позже мы вернемся к этим правилам стиля и рассмотрим их более подробно.
Другая важная вещь, которую делает эта функция, это то, что она изменяет на activeLink значение свойства itemID выбранного элемента. Это обеспечивает то, что activeLink всегда указывает на номер, который соответствует блоку контента, выводимому в данный момент в слайдере.
Вот, где происходят интересные изменения! Давайте немного перепрыгнем вперед и рассмотрим функцию changePosition :
Эта функция делает две вещи:
І. Переключает визуальное отображение выбранной ссылки, чтобы указать, что в настоящее время она является активной.
II. Устанавливает позицию элемента оболочки.
Давайте рассмотрим эти две вещи более подробно.
Переключение визуального отображения выбранной/активной ссылки
Чтобы вам было понятнее, то о чем я говорил перед этим, ваши ссылки навигации могут быть в одном из двух состояний. Эти состояния предназначены для того, чтобы пользователь видел, какой блок контента в настоящее время является активным:
В любом случае вы помните, что ранее мы вызвали следующие два правила стиля:
В нашей функции setClickedItem ( также известной, как функция, которая будет вызываться в результате нажатия на ссылку ), мы сначала вызываем removeActiveLinks :
Эта функция отвечает за удаление класса active для всех ссылок навигации:
Таким образом, мы рассмотрели, как удалить класс active у всех ваших ссылок. Добавление класса в свою очередь происходит очень просто:
Установка позиции оболочки
Давайте рассмотрим следующий фрагмент:
Как это связано с реализацией эффекта слайдера? Вы помните, что некоторое время назад мы добавили к стилю #wrapper одно правило?
Я не знаю, как насчет вас, но для меня это просто удивительно. Это то, что мы не могли себе представить несколько лет назад, когда нам приходилось прилагать много усилий и писать код для обработки эффекта слайдера. Это то, что делает наш контент-слайдер красивым.
Вот так вот просто мы только что создали с нуля контент-слайдер и ( что более важно ) узнали, как он работает.
Улучшение контент-слайдера
Прокручивание с помощью преобразования translate3d
Это особенно актуально для мобильных устройств, при низкой скорости Интернет-соединения часто использующих аппаратные средства, и здесь прерывистая, скачкообразная смена слайдов может быть особенно заметной.
Особенностью данной функции является также то, что в результате ее использования браузер аппаратно ускоряет изменение позиции. Чего же мы ждем?
Таким образом, с помощью transform задается исходная позиция элемента оболочки.
Первый этап: Добавление вспомогательных элементов
На первом этапе добавляем следующий вспомогательный код ниже основного кода, который мы имеем на текущий момент:
Этот код поможет нам установить свойство transform с помощью вендорных префиксов, таким образом, оно будет поддерживаться максимальным количеством браузеров.
Второй этап: внесение Ahoy!
В функции changePosition найдите следующие строки кода:
Замените их следующим кодом:
Если вы теперь просмотрите документ, то увидите, что блоки контента в слайдере перепрыгивают с одного места в другое.
Как только вы внесете эти изменения, наш слайдер снова будет работать примерно таким же образом, как и до того.
Разница заключается только в том, что при смене слайдов теперь используется аппаратное ускорение, и она будет происходить теперь более плавно и поддерживаться на большем количестве устройств.
Автоматическая смена слайдов с интервалом в несколько секунд
В данный момент слайды у нас меняются только когда мы нажимаем на одну из ссылок навигации. Но это не единственный способ работы слайдера. Многие контент-слайдеры автоматически прокручивают контент каждые несколько секунд, при этом также существует возможность перейти к конкретному разделу с помощью ссылок навигации.
Пример одного из таких контент-слайдер вы видите ниже:
Да, это наш старый слайдер, в который внесены небольшие изменения, чтобы контент мог автоматически прокручиваться в контейнере. Угадайте, что мы будем делать дальше?
Заставим слайды прокручиваться автоматически!
В этом нам поможет функции setInterval. Основная задача этой функции — обеспечить выполнение кода через равные промежутки времени:
Каждые несколько секунд ( или сколько вы зададите в качестве значения интервала ), функция setInterval указывает нашему слайдеру переходить к следующему блоку контента.
Когда контент закончился, слайдер через цикл переходит к началу контента и начинает все заново. Делается это довольно несложно. От вас требуется только знание нескольких приемов и четкое понимание того, как работает ваш контент-слайдер.
Первое изменение, которое нам нужно внести, это добавить дополнительный код, необходимый, чтобы выполнить эту работу. В конце уже имеющегося у вас кода добавьте следующие строки:
Что означает весь этот код, мы рассмотрим в ближайшее время. Сейчас добавьте все это. После того, как вы сделаете это, просмотрите контент-слайдер в браузере. Вы увидите, что слайды контента меняются в контейнере каждые две секунды.
Существует только одно значительное изменение, которое нам осталось внести. Сейчас слайды сменяют друг друга каждые две секунды, независимо от того, нажали ли вы ссылку навигации или нет.
Правильнее будет сделать так, чтобы после нажатия одной из ссылок таймер сбрасывался на 0. Чтобы внести это изменение, добавьте следующую строку кода в обработчик событий setClickedItem :
После этого контент-слайдер будет вести себя должным образом, когда вы вмешиваетесь и нажимаете на ссылку навигации. Ура!
Пояснение автоматической смены слайдов
Итак, нам осталось разобраться только с одной вещью. Давайте быстро рассмотрим код, который мы только что добавили, и поймем, почему он делает то, что он делает.
Начнем с функции goToNextItem/span> :
Эта функция отвечает за отслеживание контента, который отображается в данный момент, и того, что последует за ним. Чтобы лучше понять, что происходит, взгляните на приведенное ниже изображение:
Оператор if функции goToNextItem просто проверяет, остался ли еще контент или слайдеру следует вернуться в начало:
В данный момент путь, по которому обрабатывается наш код, ничем не отличается от того, как он обрабатывался при нажатии на ссылку вручную.
Итак … мы рассмотрели код в функции goToNextItem для перемещения к следующей части контента. Чтобы вызвать этот слайд автоматически задействуются следующие строки:
Просто добавив эту функцию ( и вызвав ее ), вы заставите ваш контент-слайдер начать автоматически прокручивать блоки контента.
Осталось только разобраться с тем, как сбрасывается таймер ( который я назвал setInterval ), когда вы вручную нажимаете ссылку. Чтобы справиться с этим, задействуется оставшийся у нас код.
Логика проста. Таймер останавливается, когда вы вручную выбираете, какой блок контента нужно вывести в слайдере:
Заключение
Вот и все, мы рассмотрели, как создать красивый контент-слайдер, используя только
В то время как сам слайдер определяется не таким уж и большим количеством кода, разбор концепций, которые лежат в его основе, возможно, займет у вас некоторое время. Я разместил в статье ссылки на другие источники, которые освещают темы, затронутые мной лишь поверхностно. Вы можете прочесть их, когда у вас будет для этого время.
Контент-слайдеры бывают разных форм и размеров. Некоторые состоят из нескольких уровней, где смена контента может осуществляться как по вертикали, так и по горизонтали.