Делаем простой слайдер на jQuery. Как сделать адаптивный слайдер на css3

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

Начать нужно с html-разметки. В этом случае она будет совсем простой, всего один блок с идентификатором:

Для слайдов я подготовил 3 картинки одинаковых размеров. В моем случае получилось 448 пикселей в ширину и 251 в длину. Это размеры картинок. Я рекомендую вам, чтобы все размеры были одинаковы, тогда вообще никаких проблем с нашим слайдером не будет.

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

У нас просто фоновая картинка в блоке, и больше ничего. Для простоты я сохранил картинки, которые использую в этом примере под названиями 1, 2 и 3.

А вот теперь начинается самое интересное. Самое время прописать ту самую анимацию, которая заставит фоновое изображение изменяться. Это делается с помощью конструкции @keyframes .

@keyframes slider{ 0%{ background: url(1.jpg);} 33%{ background: url(2.jpg);} 66%{ background: url(3.jpg);} }

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

Что же мы тут видим? Во-первых, сначала указывается временной отрезок в анимации, а потом в фигурных скобках пишутся свойства, которые должны применяться в этот момент. Мы как бы говорим браузеру, что в самом начале анимации фоном должно быть изображение 1.jpg , далее на трети выполнения анимации оно должно быть изменено на 2.jpg , ну и ближе к концу опять на другое изображение.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Между тегами 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 :

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

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

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

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

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

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

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

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

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

Просто добавьте две новые строки и, если хотите, отступы строк, которые просто предназначены для укладки 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 ):

Давайте бегло рассмотрим 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 -кода:

// просто запрашиваем 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.classList.add("active"); < 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 и добавьте в него одну строку:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обратите внимание, как я запрашиваю 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.classList.add("active");

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

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

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

Следующее, что мы рассмотрим, это обработчик событий 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; }

В нашей функции 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 . Это будет, как говорит сейчас молодежь: «Я рыдаю !».

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

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

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

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

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

Таким образом, с помощью 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] != "undefined") { return properties[i]; } } return null; }

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

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

В функции 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 = 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; }

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

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

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

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

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

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

window.setInterval(functionToCall, delay);

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

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

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

// // Код для автоматической смены слайдов // var timeoutID; function startTimer() { // ожидание в течение 2 секунд перед вызовом goInactive timeoutID = window.setInterval(goToNextItem, 2000); } startTimer(); function goToNextItem() { removeActiveLinks(); if (activeLink < links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }

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

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

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

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

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

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

function goToNextItem() { removeActiveLinks(); if (activeLink < links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}

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

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

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

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

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

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

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

var newLink = links; 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 .

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

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

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

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

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

Время не стоит на месте а с ним и прогресс. Это затронуло и просторы интернета. Уже можно заметить как меняется внешний вид сайтов, особенно большой популярностью пользуется адаптивный дизайн. И в связи с этим появилось не мало новых адаптивных jquery слайдеров , галерей, каруселей или подобных плагинов.
1. Responsive Horizontal Posts Slider

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

2. Слайдер на Glide.js

Этот слайдер подходит для любого сайта. Тут используется Glide.js с открытым кодом. Цвета слайдера можно легко изменить.

3. Tilted Content Slideshow

Адаптивный слайдер с контентом. Изюминкой данного слайдера является 3d эффект изображений, а также разные анимации появления в случайном порядке.

4. Слайдер с использованием HTML5 canvas

Очень красивый и впечатляющий слайдер с интерактивными частицами. Выполнен он с помощью HTML5 canvas,

5. Слайдер «Морфинг изображений»

Слайдер с эффектом морфинга (Плавная трансформация из одного объекта к другому). В данном примере слайдер хорошо подойдет для портфолио веб-разработчика или веб-студии в виде портфолио.

6. Круговой слайдер

Слайдер в виде круга с эффектом переворота изображения.

7. Слайдер с размытым фоном

Адаптивный слайдер с переключением и размытием заднего фона.

8. Адаптивный фэшн слайдер

Простой, легкий и адаптивный слайдер для сайта.

9. Slicebox - jQuery 3D image slider (ОБНОВЛЕННЫЙ)

Обновленная версия Slicebox slider с исправлениями и новыми возможностями.

10.Free Animated Responsive Image Grid

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

11. Flexslider

Универсальный бесплатный плагин для вашего сайта. Этот плагин выполнен в нескольких вариантах слайдера и каруселях.

12. Фоторама

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

P.S. Ставил слайдер несколько раз и считаю что он один из лучших

13. Бесплатная и адаптивная 3D галерея-слайдер с миниатюрами.

Экспериментальная галерея-слайдер 3DPanelLayout с сеткой и интересными эффектами анимации.

14. Слайдер на css3

Адаптивный слайдер выполнен при помощи css3 с плавным появлением контента и легкой анимацией.

15. WOW Slider

WOW Slider - это слайдер изображений с потрясающими визуальными эффектами.

17. Elastic

Эластичный слайдер с полной адаптивностью и с миниатюрами слайдов.

18. Slit

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

19. Адаптивная фотогалерея plus

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

20. Адаптивный слайдер для WordPress

Адаптивный бесплатный слайдер для WP.

21. Parallax Content Slider

Слайдер с эффектом параллакса и контролем каждого элемента с помощью CSS3.

22. Слайдер с привязкой музыки

Слайдер с использованием открытого исходного кода JPlayer. Этот слайдер напоминает презентацию с музыкой.

23. Слайдер с jmpress.js

Адаптивный слайдер основан на jmpress.js и поэтому позволит использовать некоторые интересные 3D эффекты к слайдам.

24. Fast Hover Slideshow

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

25. Image Accordion with CSS3

Аккордеон изображений с помощью css3.

26. A Touch Optimized Gallery Plugin

Это адаптивная галерея которая оптимизирована для тач-устройств.

27. 3D Галерея

3D Wall Gallery - создана для браузера Safari, где будет виден 3D эффект. Если смотреть на другом браузере то функциональность будет в порядке но небудет виден 3D эффект.

28. Слайдер с пагинацией

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

29.Image Montage with jQuery

Автоматическое расположение изображений в зависимости от ширины экрана. Очень полезная штука при разработке сайта портфолио.

30. 3D Gallery

Простенький 3D круговой слайдер на css3 и jQuery.

31. Полноэкранный режим с 3D эффектом на css3 и jQuery

Слайдер с возможностью полно-экранного просмотра изображений с красивым переходом.

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

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

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

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

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

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

Ниже я прикрепил программный код своего приложения. По ходу кода я оставлял для вас комментарии.

Автоматический переключатель изображений /*Описываю внешний вид каркаса, основы для будущего слайдера */ #slides{ position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; } /* Редактирую отображение картинок*/ img { width: auto; height: 390px; padding: 13px; } /*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */ li { text-align: center; } /*Описываю внешний вид самих слайдов */ .slide{ position: absolute; opacity: 0; top: 0px; left: 0px; height: 100%; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*При отображении объект становится видимым и выдвигается на передний план*/ .showing{ opacity: 1; z-index: 4; }

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

Итак, сначала при помощи метода querySelectorAll переменной MySlider я присваиваю список всех элементов в переделах указанных. Указывает это запись

document.querySelectorAll ("#slides .slide")

Таким образом, в MySlider хранится коллекция из четырех элементов.

Далее я задаю, с какого изображения начинать показ, присваивая переменной currentPicture нуль. После указываю, что смена слайдов происходит через 2,7 секунды и при этом должна быть вызвана функция обработки nextSlide .

Переходим к самой функции.

Изначально для текущего элемента списка я меняю описание классов, т.е. переписываю «slide showing » на «slide ». Следовательно, изображение становится невидимым.

Теперь определяю новый элемент коллекции, который будет отображаться на экране. Для этого я беру текущую позицию +1. Вы могли заметить, что я также использую деление с остатком (%) на количество имеющихся слайдов. Этот финт ушами необходим для того, чтобы запустить показ по новому кругу. Вот как это будет выглядеть буквально:

А вот теперь полученному элементу присваиваю описание классов «slide showing ». Как видите, все реализуется проще простого.

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

С уважением, Роман Чуешов

Прочитано: 256 раз