Одна из наибольших проблем, стоящих в данный момент перед западной цивилизацией — это как отображать большое количество контента на небольшом пространстве.
Одно из эффективных решений заключается в размещении контента в последовательно выводимых блоках, используя то, что известно в отрасли (и в сетевом сообществе ) под названием контент-слайдер. Вы, возможно, не слышали о нем, но я готов поспорить, что вы определенно должны были его видеть.
Чтобы освежить вашу память и дать представление о том, что мы будем создавать, ниже приведен пример контент-слайдера :
В этой статье я расскажу, как создать свой собственный красивый слайдер контента, который очень похож на этот. Помимо просто создания контент-слайдера, вы узнаете много нового о том, как взаимодействуют 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Внутри тега сценария, добавьте следующие строки 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 указывает каждой из ссылок, на значение каждого из атрибутов 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.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 . Это будет, как говорит сейчас молодежь: «Я рыдаю !».
Прокручивание с помощью преобразования translate3dВ данный момент наши слайды прокручиваются с помощью изменения значения свойства 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 . В зависимости от того, насколько старый браузер вы используете, будет использоваться одно из этих значений.
Второй этап: внесение Ahoy!В функции 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 .
ЗаключениеВот и все, мы рассмотрели, как создать красивый контент-слайдер, используя только
HTML CSSи JavaScript . Кроме того, вы узнали, как задать некоторые изменения, для того чтобы увеличить производительность и обеспечить возможность автоматической смены блоков контента.
В то время как сам слайдер определяется не таким уж и большим количеством кода, разбор концепций, которые лежат в его основе, возможно, займет у вас некоторое время. Я разместил в статье ссылки на другие источники, которые освещают темы, затронутые мной лишь поверхностно. Вы можете прочесть их, когда у вас будет для этого время.
Контент-слайдеры бывают разных форм и размеров. Некоторые состоят из нескольких уровней, где смена контента может осуществляться как по вертикали, так и по горизонтали.
Некоторые слайдеры содержат вертикально выровненный контент с блоками расположенными друг над другом. Если вы довольно инициативны и хотите использовать вместо перехода CSS
То иногда приходится решать задачи, связанные с фронтэндом, несмотря на то, что я его недолюбливаю 🙂
О моём отношению к всему, что связано с «прекрасным» вы, собственно говоря, могли оценить по дизайну данного сайта, который разрабатывался мною единолично 🙂
Однако, сравнительно недавно я столкнулся с необходимостью реализации слайдера на JavaScript, причём сделать это нужно было без каких-либо готовых библиотек и даже без всеми любимого jQuery.
Вызвана данная необходимость была тем, что в результате должен был получиться JS скрипт, который через сторонний сервис подключался бы на сайт. Следовательно, готовые карусели на JavaScript сразу отпадали, т.к. для их интеграции нужно было в HTML код сайта добавлять подключение библиотеки через тэг script и копировать сами файлы либы на сервер или тянуть их по cdn, но для этого снова потребовалось бы править код ресурса.
Как сделать JavaScript слайдер: началоСегодня, думаю, что каждый, кто попадал в похожую ситуацию, начинал с поисков имеющихся наработок, т.к. когда задача сделать JS карусель стоит в рамках работы — это всегда должно быть сделано максимально быстро. И при таких условиях сидеть и выдумывать свои велосипеды, ясное дело, никто не позволит.
Заказчикам всегда наплевать на то, как код написан, какая у него архитектура, главное — видеть результат!
В итоге, как вы поняли, перед тем, как написать слайдер на JavaScript без jQuery, я решил подыскать готовый и доработать его под свои нужды. Почему без jQuery? Да потому что на целевом ресурсе, куда я планировал подключать свой слайдер через сервис, вызов jQuery в коде был расположен позже скрипта, подключаемого сервисом. Поэтому jQuery конструкции в моём коде просто не воспринимались.
В качестве основы я взял этот JavaScript слайдер изображений — https://codepen.io/gabrieleromanato/pen/pIfoD.
Остановиться я решил именно на нём, т.к. его JS код был написан с применением принципов ООП и классы в нём основываются на прототипах, а не на банальных функциях.
Честно говоря, я глубоко не понимаю и не признаю сегодняшнюю шумиху вокруг JavaScript с использование ООП, фреймворков и прочих архитектурных штук в языке, который изначально задумывался как простенький язык динамических сценариев. Равно как и сам JS я откровенно недолюбливаю с его синтаксическим винегретом, позволяющим одни и те же конструкции писать несколькими способами.
Но, к сожалению, в современном мире мои позиции мало кто разделяет, т.к. данный язык развивается сумасшедшими темпами и предпринимает даже попытки завоевать умы бэкенд разработчиков с помощью Node.js как альтернативы Java, PHP, C#, Ruby и других монстров.
В итоге, чтобы банально не остаться без работы, приходится по-тихоньку с JavaScript разбираться. А в выбранной мною реализации слайдера на чистом JavaScript я встретил то, что, как вы поняли, презираю в данном языке. Поэтому я её и выбрал, чтобы был хоть какой-то повод поработать и разобраться с JavaScript ООП и прототипными классами — иначе я бы к ним добровольно никогда в жизни не прикоснулся бы 🙂
На базе найденного мною кода мне необходимо было разработать слайдер на чистом JS во всплывающем окне (такую штуку ещё называют popup, попап и т.д.), который имел бы кнопки переключения слайдов и кликабельные индикаторы текущего слайда. Также нужно было сделать кнопку для закрытия данного окна.
Вот, что у меня получилось в итоге.
Делаем библиотеку JS слайдераСперва я решил всё реализовать по уму и сделать JavaScript слайдер для сайта в виде библиотеки, подключаемой на сайт одним-единственным скриптом, в котором будут вызываться компоненты слайдера, разбитые по подкаталогам. Назвать её я решил popupSlider.js в честь её изначального предназначения.
Её код можно найти на GitHub по этому адресу — https://github.com/Pashaster12/popupSlider.js
Структура библиотеки вышла следующая:
Папка slides предназначена для картинок слайдов. В controls размещены картинки элементов управления JS каруселью (кнопки закрытия слайдера и переключения слайдов). А в assets — статические элементы JS слайдера: HTML разметка и файл с CSS стилями.
Ну, а файл popupSlider.js — это и есть сердце самой библиотеки, в котором прописаны действия JavaScript карусели и устанавливается связь с остальными файлами. Именно его мы и будем подключать на сайте, а он уже будет вызывать остальные.
Я решил начать с HTML разметки нашей JS карусели картинок, которая в моём случае выглядит так:
Text 1
Text 2
Text 3
Для оформления слайдера на JavaScript в виде попапа я использовал следующие стили:
#slider { margin: auto; width: 600px !important; overflow: hidden; } #slider-wrapper { width: 9999px; height: 343px; position: relative; transition: left 400ms linear; } .slide { float: left; width: 600px; position: relative; overflow: hidden; } .caption { width: 600px; height: 110px; line-height: 1.5; font-size: 15px; font-weight: 300; text-align: center; color: #000; display:table; } .caption-container { display: table-cell; vertical-align: middle; padding: 0 20px; } #slider-nav { position: absolute; bottom: -36px; text-align: center; left: 50%; transform: translateX(-50%); } #slider-nav a { width: 8px; height: 8px; text-decoration: none; color: #000; display: inline-block; border-radius: 50%; margin: 0 5px; background-color: #fafafa; } #slider-nav a.current { background-color: #337ab7; } .horizontal-controls { position: absolute; display: inline-block; width: 12px; height: 20px; top: 50%; margin-top: -10px; } #prev { background: url(../controls/arrow_left_inactive.png); left: -40px; } #prev:hover { background: url(../controls/arrow_left_active.png); } #next { background: url(../controls/arrow_right_inactive.png); right: -40px; } #next:hover { background: url(../controls/arrow_right_active.png); } #cq-popup { width: 600px; z-index: 23; left: calc(50%); top: calc(50%); position: fixed !important; background-repeat: no-repeat; background-position: right; background-color: #fff; font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana"; transform: translate(-50%, -50%) scale(1); } #cq-popup .header { display: inline-block; font-size: 17px; font-weight: 500; } #cq-popup > div { width: 500px; font-size: 22px; line-height: 36px; } #cq-popup-btclose { text-decoration: none; position: absolute; right: -40px; top: 0; background: url(../controls/btn_delete_inactive.png); height: 16px; width: 16px; } #cq-popup-btclose:hover { background: url(../controls/btn_delete_active.png); } #cq-popup-bg { position: fixed; top:0; width: 100%; height: 100%; background: rgba(51,51,51,0.8); z-index: 22; }
В результате применения данных стилей JS карусель выглядит следующим образом:
И HTML разметку, и CSS стили я вынес в отдельные файлы popupSlider.html и popupSlider.css, которые расположены в директории assets библиотеки слайдера на JavaScript. Я сделал это специально, чтобы пользователи при использовании данного кода могли без проблем корректировать разметку и оформление, не лазя в JS коде, где вынесенное нужно было бы прописать напрямую.
Кроме того, многие ещё любят минимизировать JS для ускорения загрузки сайта. Так что кастомизировать данное решение при указанных условиях было бы очень сложно.
В итоге, я решил просто подключать готовые файлы в главном файле библиотеки popupSlider.js, который для моей постановки задачи принял следующий вид:
Function Slider(element) { this.loadStatic(); this.el = document.querySelector(element); this.init(); } Slider.prototype = { init: function () { this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.nextBtn = this.el.querySelector("#next"); this.prevBtn = this.el.querySelector("#prev"); this.navigate(); }, navigate: function () { var self = this; for (var i = 0; i < this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index > 1) this.prevBtn.style.display = "block"; else if (index == 1) this.prevBtn.style.display = "none"; }, setCurrentLink: function (link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Немного комментариев по поводу приведённого кода. Содержимое файла popupSlider.js является одним JavaScript классом Slider, который, как и в PHP, содержит конструктор и методы класса. Только в JS определение конструктора, в отличие от PHP, является обязательным.
Конструктор определяется с помощью следующей конструкции:
Function Slider(element) { //код конструктора }
Внутри конструктора должны быть прописаны действия, которые будут выполняться при создании объекта класса.
Сами методы класса будут находиться внутри прототипа и будут доступны для всех экземпляров данного JavaScript класса. JS прототип в моём случае описывается следующей конструкцией:
Slider.prototype = { //методы }
Вызываться за пределами тела класса они будут следующим образом:
Var slider = new Slider(); slider.class_method();
А внутри самого кода класса доступен следующий способ:
This.class_method();
Главное только не забывать, что в JavaScript значение this зависит от контекста вызова, поэтому в телах некоторых методов, в которых нужно было вызывать методы и свойства класса, присутствует такая конструкция:
Var self = this; self.class_method(); //чтобы обратиться к методу, находящемся на уровень выше кода описываемого метода
Вроде обо всех нюансах написания кода я рассказал. Теперь пару слов о методах нашего JavaScript класса, внутри которых содержатся описания действий JS карусели картинок.
loadStatic()
Самый первый метод, вызывающийся при создании экземпляра класса в конструкторе. Отвечает за добавление в HTML кода страницы сайта HTML разметки слайдера и файла со стилями.
Сначала в памяти создаётся новый тэг link с помощью JavaScript функции document.createElement() и ему присваиваются значения всех необходимых атрибутов, в том числе и путь к CSS файлу со стилями JS слайдера. И, в конце-концов, он добавляется в HTML страницы с помощью JavaScript метода appendChild() в конец секции head, где и должны стилей.
Далее мы делаем то же самое для файла с HTML разметкой нашего слайдера на чистом JavaScript. Вот только здесь есть маленький нюанс: просто так HTML файл внутри такого же подключить нельзя, как мы сделали это с CSS файлом. Для этого есть специальные библиотеки, например, для того, чтобы подключить HTML в HTML, отлично подходит либа от w3.org — https://www.w3schools.com/howto/howto_html_include.asp
Но тогда её пришлось бы или подключать в саму библиотеку слайдера, или просить о самостоятельной её установке пользователей. Но всё это неоптимально, т.к. требует много телодвижений и замедляет скорость загрузки сайта за счёт дополнительных скриптов.
В итоге, я решил получать содержимое HTML файла внутри JavaScript кода и загружать его в новый div элемент, создаваемый в памяти, как я делал это ранее для подключения CSS файла в JavaScript. Сгенерированный элемент подключается в самый конец секции body HTML кода страницы сайта.
Если хотите вставить div с разметкой слайдера не просто в конец body, а в какой-то конкретный контейнер, то можете вместо следующего кода:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Прописать следующее, указав нужный идентификатор целевого контейнера (в моём случае HTML JS слайдера будет расположен в элементе с id popupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
Метод, который вызывается в конструкторе после loadStatic(), и нужен для инициализации свойств класса, соответствующих основным HTML элементам, к которым мы будем обращаться в следующем коде.
В конце вызывается метод navigate().
navigate()
В данном методе происходит указание действий, происходящих при клике на кнопки переключения слайдов и элементы навигации, расположенные под самим слайдером, в виде кружочков.
Сам JavaScript код смены слайдов для удобства я вынес в отдельный метод slide(), а в данном я только навешиваю его на событие click для каждой круглой кнопки в цикле.
При клике на кнопки «предыдущий слайд»/»следующий слайд» я, как видите, решил всего лишь эмулировать нажатие на соответствующий кружочек, определяя нужный относительно текущего, у которого имеется CSS класс current.
slide(element)
Метод, «отвечающий за магию» самой JavaScript карусели, в котором содержится код, меняющий слайды местами. В самом начале вызывается метод setCurrentLink(), о котором мы поговорим чуточку позже.
В качестве входного параметра в него передаётся объект кнопки навигации JS слайдера в виде кружочка.
Само переключение слайдов работает следующим образом:
В конце метода описано поведение для кнопок «предыдущий слайд»/»следующий слайд», оформленных в виде стрелок влево/вправо соответственно. Если текущий слайд — первый из всего списка, то кнопка перехода к предыдущему слайду скрывается. Если последний, то убираем кнопку перехода к следующему слайду.
setCurrentLink(link)
Данный метод нашего класса JavaScript слайдера отвечает за подсветку навигационной круглой кнопки, соответствующей текущему элементу. Т.е. если у нас выбран второй слайд, то будет подсвечиваться вторая кнопочка.
В качестве входного параметра в функцию передаётся объект кнопки, которая должна быть выделена как текущая.
Логика выделения текущего элемента проста:
Самый последний метод класса, в котором определяется действие при нажатии на кнопку закрытия слайдера в виде крестика. Здесь, собственно говоря, код самый понятный из всего, содержащегося в классе JS слайдера.
При нажатии на кнопку закрытия, доступ к которой получается по её идентификатору, происходит удаление со страницы элемента слайдера и элемента, задающего полупрозрачный фон. Они также, в свою очередь, получаются по уникальным идентификаторам.
Сам метод вызывается внутри описанного ранее navigate(), который содержит в себе все сценарии действий, происходящих на нашем JavaScript слайдере.
Кстати, если вы захотите сделать закрытие слайдера при клике за его пределами, то достаточно в данный метод добавить следующий код:
Document.getElementById("cq-popup-bg").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove();
JavaScript слайд шоу на базе разработанной библиотекиИногда на практике может потребоваться сделать JS карусель с прокруткой, которую часто называют слайд шоу. В моём случае этого не требовалось, но я всё же решил сделать такую на базе итогового кода библиотеки для случая, когда это может пригодиться.
На самом деле, реализация JavaScript слайд шоу отличается от обычного слайдера совсем незначительно. Разница заключается лишь в том, что в слайд шоу слайды переключаются автоматически с заданным временным интервалом, а в случае обычной JS карусели они меняются вручную с помощь элементов навигации.
SlideShow: function (timeout) { var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); }, timeout); }
Что здесь происходит — думаю, понятно. Для создания данного метода я скопировал код из события клика на кнопки ручного переключения слайдов и разместил его внутри вызова JavaScript функции setInterval(), которая выполняет указанное действие через заданный промежуток времени.
Сценарий действия передаётся первым аргументом в виде анонимной функции, а временной интервал — вторым, который я решил сделать в виде переменной, значение которой передаётся при вызове slideShow().
Единственная модификация кода внутри setInterval(), которая потребовалась, — это определение количества слайдов и сравнение с ним индекса текущего слайда для зацикленности автоматического переключения.
Ну, и для того, чтобы данный код заработал, сам метод необходимо вызвать. Я решил сделать это всё в том же navigate(), который как раз и является сборником всяких сценариев. Вызов я разместил в самом конце, передав в качестве аргумента значение временного интервала для автоматической смены слайдов в нашем JS слайд шоу (я выбрал 2000 милисекунд или 2 секунды, вы можете по необходимости изменять это число):
Self.slideShow(2000);
После этого проверяйте работу JavaScript слайдера, не забыв при этом почистить и браузера.
По идее, всё должно работать. Если нет — изучайте ошибки в консоли браузера и делитесь ими в комментариях.
В итоге, у нас получилось JS слайд шоу, в котором слайды переключаются автоматически и по кругу, т.е. при достижении последнего слайда шоу переходит на новый цикл, и показ снова начинается с самого первого элемента.
При работе с различными библиотеками JS каруселей картинок и отзывов я заметил, что данную практику разработчики активно применяют, но с некоторым дополнением. Во всех увиденных мною решениях автоматический показ слайдов прерывается, если пользователь сделал ручное переключение. Поэтому я решил сделать подобное и в своей библиотеке.
Для прерывания автоматического показа слайдов JavaScript карусели я решил воспользоваться стандартной JS функцией clearInterval(), которой в качестве аргумента передаю идентификатор временного интервала, возвращаемого функцией setInterval() при его установке.
В итоге, получился следующий код, который я решил не оформлять отдельным методом:
ClearInterval(self.slideCycle);
И разместил его в местах описания действий при кликах на различные элементы навигации, т.е. в следующих:
Link.addEventListener("click", function (e) {...}); self.prevBtn.addEventListener("click", function (e) {...}); self.nextBtn.addEventListener("click", function (e) {...});
Вызов clearInterval() лучше делать поближе к самому событию клика, главное, чтобы перед ним, а не после.
Интеграция JavaScript слайдера на сайтИтак, наш слайдер на чистом JS готов. Осталось теперь только подключить его на сайт.
Для этого необходимо выполнить последовательно следующие шаги, которые являются стандартными действиями при интеграции каких-либо сторонних JavaScript библиотек вообще.
Шаг 1
. Копируем файлы библиотеки к себе на сайт в отдельный каталог.
Шаг 2
. Добавляем следующий код в HTML страниц, на которых необходимо будет отображение слайдера, разместив его перед закрывающимся тэгом body:
Шаг 3 . Размещаем следующий код вызова JS карусели в каком-либо существующем JavaScript файле, который подключается на странице после подключения самого слайдера:
Var aSlider = new Slider("#slider");
Как видите, данный код, — это, по сути, создание объекта класса Slider, который содержится в popupSlider.js. Именно поэтому его вызов должен быть только после подключения самого файла класса на страницу.
Добавление новых слайдов в JavaScript карусельЗдесь всё очень просто. Поскольку слайды у нас берутся из отдельной директории библиотеки slides , то при добавлении новых картинок нужно будет просто закинуть в неё нужные файлы, задав им предварительно такой же размер, как и у других.
А затем в коде файла assets/popupSlider.html добавить новый блок в контейнер с id slider-wrapper :
Text
В принципе, можете просто скопировать аналогичный существующий и изменить в нём путь к файлу изображения и текст подписи (если она вообще будет нужна).
Также необходимо будет добавить новый элемент навигации в виде кружочка, т.к. на данный момент автоматическое его добавление пока не реализовано. Для этого нужно будет добавить следующий код в контейнер с id slider-nav , прописав его в самом конце:
Значение атрибута data-slide должно быть больше самого большого у остальных элементов. Достаточно всего лишь увеличить максимальное текущее на единицу.
Упаковка JS карусели в единый скриптВсё, слайдер на JavaScript готов и подключен. Я лично рекомендую использовать данный вариант на практике, если он вам вообще пригодится 🙂
Для ускорения работы его, кстати, можете ещё дополнительно сжать статические компоненты: CSS, HTML и JavaScript файлы. Я не стал этого делать и предлагать вам минифицированный код, потому что систем сборок фронтэнда сейчас очень много: Gulp, Grunt, Webpack и другие. И у каждой из них свои алгоритмы сжатия и подключения файлов.
К тому же, минифицированные результаты на разных ОС могут работать по-разному. В общем, причин много.
Да и сами исходники у меня вышли, я считаю, не такие уж тяжеловесные, что нуждаются в данной процедуре. Но если же вам они будут необходимы, то настройте минификацию самостоятельно с учётом вашей ОС и сборщика.
Как я писал в самом начале, для решения поставленной мне изначально задачи нужно было получить единый JS файл для корректного использования моего слайдера через сторонний сервис на сайте. По этой причине я, собственно говоря, и не стал пользоваться готовыми сторонними библиотеками.
Тогда вариант единого скрипта JavaScript карусели вам придётся как нельзя кстати, т.к. весь контент будет содержаться прямо в нём, в том числе и HTML/CSS код, который в случае библиотеки хранится в отдельных файлах.
Скрипт в моём случае состоит из двух частей. В первой части располагалось содержимое файла popupSlider.js, которое я второй раз не буду приводить. Вставьте его самостоятельно, убрав из кода класса описание метода loadStatic() и его вызов, т.к. они нам не понадобятся.
Вторая же часть единого скрипта JavaScript слайдера для сайта представляет собой обработчик события DOMContentLoaded, которое наступает при загрузке содержимого страницы.
Там у нас будет происходить добавление на страницу HTML/CSS кода JS карусели и создание объекта класса Slider, что равносильно активации самого слайдера.
Схематично код выглядит следующим образом:
/* содержимое popupSlider.js без описания метода loadStatic() и его вызова */ document.addEventListener("DOMContentLoaded", function(){ var str = "\ \ /*css код*/ \ /* html код */ "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Поскольку в моём случае вариант загрузки файлов на сервер был вообще закрыт, мне пришлось загрузить файлы картинок элементов управления JavaScript каруселью на облако и вместо путей к ним в HTML и CSS коде прописать ссылки, сгенерированные при сохранении.
Если у вас таких сложностей нет, то можете ничего не менять, но не забыть скопировать каталоги slides и controls библиотеки на сервер и указать правильные пути к ним.
Самописный JS слайдер — перспективы развитияЧестно скажу, что заниматься целенаправленной поддержкой и развитием созданного мною решения я заниматься не планирую 🙂 На данный момент подобных слайдеров существует вагон и маленькая тележка, которые, в отличие от моего имеют свою историю, тщательно оттестированы и поддерживаются обширным комьюнити пользователей и разработчиков.
Мне же начинать весь этот путь с нуля в одиночку и создавать ещё один велосипед как-то не интересно, да и времени на это толком нет. Но, зато данный JavaScript слайдер является отличной возможностью попрактиковаться в разработке путём рефакторинга его кода и реализации новых интересных функций, которых, возможно, на данный момент ещё нет.
Так что если вам, как и мне, нужна будет кодовая база для экспериментов и вы располагаете хоть каким-то лишним свободным временем — копируйте себе код описанного мною JavaScript слайдера или присоединяйтесь к контрибьюторам на GitHub. Репозиторий открытый, а ссылку на него я предоставил в начале статьи.
Если вы хотите прокачать свои фронтэнд скилы на моём творении, могу вам даже подкинуть небольшой список правок и доработок, в которых нуждается код и которые, возможно, будут интересны вам в плане их реализации:
Приведённый мною список правок, естественно, не конечный и может быть дополнен. Пишите о своих предложениях, мыслях и пожеланиях в комментариях под статьёй и делитесь со своими друзьями через социальные сети, чтобы их также привлечь к разработке.
Прошу мой код строго не судить, т.к., я как я уже говорил, Frontend спецом я себя не считаю и не являюсь. Также я открыт для всех ваших замечаний по стилю кодирования и надеюсь, что смогу что-то у вас перенять, а вы — у меня, т.е. выполнить основное предназначение разработки и поддержки OpenSource продукции.
Вступайте в сообщества проекта, подписывайтесь на обновления и можете даже помочь мне материально с помощью формы прямо под самой статьёй, если я чем-то смог вам помочь или вам просто нравится то, чем я занимаюсь 🙂
У меня всё! Всем добра! 🙂
Если вам нужно добавить на свой сайт качественный JQuery-слайдер изображений, то в этой статье вы найдете описание нужных плагинов. Несмотря на то, что JQuery существенно упростил работу с JavaScript , мы по-прежнему нуждаемся в плагинах, чтобы ускорить процесс создания веб-дизайна.
Мы можем вносить изменения в некоторые из этих плагинов и создавать новые слайдеры, которые гораздо больше отвечают задачам нашего сайта.
Для других слайдеров достаточно просто добавить заголовки, изображения и выбрать эффекты для смены слайдов, которые поставляются вместе со слайдером. Все эти плагины сопровождаются подробной документацией, так что добавить к ним новые эффекты или функции не составит большого труда. Вы даже можете изменить триггеры, зависящие от событий, если являетесь опытным программистом JQuery .
Последние тенденции, такие как адаптивный дизайн, очень важны для веб-проектов, независимо от того, реализуете ли вы плагин или скрипт. Все эти элементы делают каждый из этих плагинов очень гибкими. Всё, что вышло в 2014 году включено в этот список.
JQuery-слайдеры изображений Jssor Responsive SliderНедавно я наткнулась на этот функциональный JQuery -слайдер, и смогла воочию убедиться, что он справляется со своей работой очень хорошо. Он содержит в себе безграничные возможности, которые можно расширить за счет открытого исходного кода слайдера:
- Адаптивный дизайн;
- Более 15 параметров настройки;
- Более 15 эффектов смены изображения;
- Галерея изображений, карусели, поддержка полноэкранного размера;
- Вертикальный ротатор баннеров, список слайдов;
- Поддержка видео.
Демо | Скачать
PgwSlider — адаптивный слайдер на основе JQuery / ZeptoЕдинственной задачей данного плагина является демонстрация слайдов изображений. Он очень компактный, так как размер JQuery-файлов составляет всего 2,5 КБ, что позволяет подгружать его действительно быстро:
- Адаптивный макет;
- SEO-оптимизация;
- Поддержка разными браузерами;
- Простые переходы изображений;
- Размер архива всего 2,5 КБ.
Демо | Скачать
Гибкий и полезный JQuery -слайдер, предназначенный для новостных ресурсов с перечнем публикаций с левой стороны и выводом изображения справа:
- Адаптивный дизайн;
- Вертикальная колонка переключения новостей;
- Расширенные заголовки.
Демо | Скачать
Этот слайдер не содержит JQuery , но я хотел бы представить его, так как он очень компактный и позволяет существенно уменьшить время загрузки страниц. Дайте мне знать, если он вам понравится:
- Адаптивный макет;
- Простой дизайн;
- Различные варианты смены слайдов;
- Минимальный код JavaScript ;
- Размер всего 3KБ.
Демо | Скачать
Галерея в стиле разбросанных на столе документов с гибким макетом и красивым дизайном должна заинтересовать многих из вас. Больше подходит для планшетов и больших дисплеев:
- Адаптивный слайдер;
- Плоский дизайн;
- Случайная смена слайдов;
- Полный доступ к исходному коду.
Демо | Скачать
Демо | Скачать
HiSlider представил новый бесплатный плагин JQuery-слайдера , с помощью которого можно создавать разнообразные галереи изображений с фантастическим переходами:
- Адаптивный слайдер;
- Не требует знания программирования;
- Несколько удивительных шаблонов и скинов;
- Красивые эффекты переходов;
- Поддержка разных платформ;
- Совместимость с WordPress, Joomla, Drupal;
- Возможность отображения контента разных типов: изображений, видео YouTube и видео Vimeo;
- Гибкая настройка;
- Полезные дополнительные функции;
- Неограниченный объем отображаемого контента.
Демо |Скачать
WOW Slider — это адаптивный JQuery-слайдер изображений с удивительными визуальными эффектами (домино, поворот, размытие, переворот и вспышка, вылет, жалюзи ) и профессиональными шаблонами.
WOW Slider поставляется вместе с мастером установки, что позволяет создавать фантастические слайдеры за считанные секунды без необходимости разбираться в коде и редактировать изображения. Также доступны для скачивания версии плагина под Joomla и WordPress :
- Полностью адаптивный;
- Поддержка всех браузеров и всех типов устройств;
- Поддержка сенсорных устройств;
- Простая установка на WordPress ;
- Гибкость в настройке;
- SEO -оптимизированный.
Демо |Скачать
Nivo Slider известен всему миру как самый красивый и простой в использовании слайдер изображений. Плагин Nivo Slider является бесплатным и выпускается по лицензии MIT :
- Требуется JQuery 1.7 и выше;
- Красивые эффекты перехода;
- Простой и гибкий в настройке;
- Компактный и адаптивный;
- Открытый код;
- Мощный и простой;
- Несколько различных шаблонов;
- Автоматическая обрезка изображения.
Демо |Скачать
Идея была навеяна слайдерами от Apple , в которых несколько маленьких элементов могут вылетать с различными эффектами анимации. Разработчики попытались воплотить эту концепцию с учетом минимальных требований для создания простого дизайна интернет-магазина, в котором «вылетающие » элементы представляют собой различные категории:
- Адаптивный макет;
- Минималистичный дизайн;
- Различные эффекты выпадения и смены слайдов.
Демо |Скачать
Очень простой слайдер, занимающий 100% ширины страницы и подстраивающийся под размеры экранов мобильных устройств. Он работает с CSS переходами, а изображения «укладываются» вместе с анкорами. Анкор может быть заменен или удален, если вы не хотите привязывать к изображению ссылку.
При установке слайдер разворачивается на 100% ширины экрана. Также он может автоматически уменьшает размер изображений слайдов:
- Адаптивный JQuery -слайдер;
- Полноразмерный;
- Минималистичный дизайн.
Демо |Скачать
Elastic Content Slider автоматически регулирует ширину и высоту в зависимости от размеров родительского элемента. Это простой JQuery-слайдер . Он состоит из слайд-зоны вверху, и панели навигационных вкладок в нижней части. Слайдер подстраивает свою ширину и высоту в соответствии с размерами родительского контейнера.
При просмотре на маленьких по диагонали экранах вкладки навигации превращаются в маленькие иконки:
- Адаптивный дизайн;
- Прокрутка кликом мыши.
Демо |Скачать
Экспериментальный слайдер, пролистывающий изображения в 3D . Два стека напоминают стопки бумаги, из которых при пролистывании изображения выводятся в центр слайдера:
- Адаптивный дизайн;
- Flip -переход;
- 3D -эффекты.
Демо |Скачать
Из руководства вы узнаете, как создать слайдер с изюминкой: идея заключается в том, чтобы «разрезать » и вывести в таком виде текущий слайд, в то время, когда вы открываете следующее или предыдущее изображение. Используя JQuery и CSS -анимацию, мы можем создавать уникальные эффекты переходов:
- Адаптивный дизайн;
- Сплит-переход;
- Полноэкранный слайдер.
Демо |Скачать
Никаких ненужных наворотов и разметки, размер менее 3КБ. Используйте любой HTML-код для своих слайдов, расширяйте его с помощью CSS . Все, что связано с Unslider , размещается на GitHub :
- Поддержка различными браузерами;
- Поддержка клавиатуры;
- Регулировка по высоте;
- Адаптивный дизайн;
- Поддержка сенсорного ввода.
Демо | Скачать
Простой и компактный плагин (размер всего 1 Кб ), который создает адаптивный слайдер, используя элементы внутри контейнера. ResponsiveSLides.js работает с большим количеством браузеров, включая все версии IE от IE6 и выше:
- Полностью адаптивный;
- Размер 1 КБ;
- CSS3 переходы с возможностью запуска через JavaScript ;
- Простая разметка с использованием маркированного списка;
- Возможность настройки эффектов переходов и длительности просмотра одного слайда;
- Поддерживает возможность создания нескольких слайд-шоу;
- Автоматическая и ручная прокрутка.
Демо |Скачать
Camera — плагин с множеством эффектов переходов, адаптивным макетом. Прост в настройке, поддерживается мобильными устройствами:
- Полностью адаптивный дизайн;
- Подписи;
- Возможность добавления видео;
- 33 различных цвета иконок.
Демо |Качать
SlidesJS — это адаптивный плагин для JQuery (1.7.1 и выше ) с поддержкой сенсорных устройств и CSS3-переходов . Поэкспериментируйте с ним, попробуйте несколько готовых примеров, которые помогут вам разобраться, как добавить SlidesJS в свой проект:
- Адаптивный дизайн;
- CSS3 -переходы;
- Поддержка сенсорных устройств;
- Прост в настройке.
Демо | Скачать
Это бесплатный адаптивный JQuery слайдер:
- Полностью адаптивный — подстраивается под любое устройство;
- Горизонтальная, вертикальная смена слайдов;
- Слайды могут содержать изображения, видео или HTML -контент;
- Расширенная поддержка сенсорных устройств;
- Использование CSS -переходов для слайд-анимации (аппаратное ускорение );
- API обратных вызовов и полностью публичные методы;
- Небольшой размер файла;
- Прост в реализации.
Демо |Скачать
Лучший адаптивный слайдер. Новая версия была доработана с целью увеличения скорости работы, компактности.
Демо | Скачать
Galleria используется на миллионах сайтов для создания галереи изображений в высоком качестве. Количество позитивных отзывов о ее работе просто зашкаливает:
- Полностью бесплатный;
- Режим полноэкранного просмотра;
- 100% адаптивный;
- Не требуется опыта программирования;
- Поддержка iPhone , IPad и других сенсорных устройств;
- Flickr , Vimeo , YouTube и многое другое;
- Несколько тем.
Демо | Скачать
Представляю вам JQuery-слайдер изображений, написанный специально для адаптивного веб-дизайна. Blueberry — это экспериментальный плагин слайдера изображений с открытым исходным кодом, который был написан специально для работы с адаптивными шаблонами:
- Минимальный дизайн;
- Адаптивный макет;
- Презентации.
Демо | Скачать
Используются стандартные элементы первой версии программы: слайдер скрывается в левую сторону и всплывает направо. Те же элементы навигации и подписи, всплывающие при наведении курсора мыши:
- Адаптивный дизайн;
- Поддержка подписей;
- Режим слайд-шоу.
Демо | Скачать
Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.
В этой статье, хочу рассказать, как создать простой универсальный слайдер с использованием jQuery. На самом деле, в сети очень большое количество разнообразных готовых слайдеров, которые порой выглядят очень заманчиво, и достаточно функциональны, но мы сделаем его с нуля.
Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?
- Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным и понятным.
- Возможность вставлять в слайды как изображения, так и любой HTML – код.
- Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
- Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.
Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).
Начнём с HTML разметки. В нужное место html страницы или шаблона нужно вставить.
Здесь содержание слайда 1 Здесь содержание слайда 2 Здесь содержание слайда 3
Здесь всё просто, как видно, вы можете вставлять сколько угодно слайдов путём создания новых div-ов. Внутрь их можно вставлять любой html код, например картинку или блок с текстом. Не забудьте только подключить саму библиотеку на jQuery в вместе со всеми js - скриптами. Если не знаете как, смотрите в примере.
#slider-wrap{ /* Оболочка слайдера и кнопок */ width:660px; } #slider{ /* Оболочка слайдера */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative;} .slide{ /* Слайд */ width:100%; height:100%; } .sli-links{ /* Кнопки смены слайдов */ margin-top:10px; text-align:center;} .sli-links .control-slide{ margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat;} .sli-links .control-slide:hover{ cursor:pointer; background-position:center center;} .sli-links .control-slide.active{ background-position:center top;} #prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg.png) left center no-repeat; opacity:0.8; z-index:3; outline:none !important;} #prewbutton{left:10px;} #nextbutton{ right:10px; background:url(arrowBg.png) right center no-repeat;} #prewbutton:hover, #nextbutton:hover{ opacity:1;}
Давайте разберём его подробнее. Сначала мы даём основному блоку с идентификатором "slider-wrap", нужную ширину. Так как в него вставляются все остальные блоки, то высоту можно не задавать, она будет зависеть от того, что будет внутри. Затем нам нужно задать размеры контейнера в котором будут находиться слайды. Это – #slider. Зададим ему ширину и высоту, а так же, к примеру, границу в 10 пикселей. Здесь ширина – 640px это меньше чем ширина родителя, так как мы добавляем границы шириной по 10px справа и слева. От ширины этого div-а так же зависит и ширина самих слайдов (.slide).
И последнее: нам нужно обязательно задать position:relative для контейнера слайдов так как слайды внутри - с абсолютным позиционированием. Для самих слайдов в CSS задаётся только ширина и высота. Остальные свойства задаются уже в jQuery скрипте.
Селектор.sli-links это блок, в котором будут находится кнопки перехода на необходимый слайд. Эти кнопки представляют из себя простые элементы вида номер, которые вставятся в необходимом количестве автоматически, вместе и с их родителем.sli-links. Для кнопок мы задаём красивый вид, а именно делаем каждую кнопку квадратной, выравниваем их все по центру, а так же, благодаря overflow:hidden и text-indent:-9999px, убираем текст, оставляя только фоновые иконки, которые так же меняются при наведении на этот элемент курсора. Для удобства я использовал спрайты, что уменьшило количество изображений.
Далее оформляется активная кнопка. Просто изменяем положение фона. Затем переоформим ссылки для перехода на сдедующий и предыдущий слайды. Вы можете дать им любое оформление, так же как и кнопкам. Данные ссылки вставляются автоматически внутрь #slider. Но чтобы их было видно, я задал им абсолютное позиционирование и верхний слой (z-index:3), чтобы они были отображены над слайдами. Думаю с CSS здесь всё понятно и просто: вы можете поменять практически все свойства, чтобы оформить слайдер так, как вам необходимо.
Давайте теперь рассмотрим сам сценарий:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) { $(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow){ clearTimeout(slideTime); $(".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next"){ if(slideNum == (slideCount-1)){slideNum=0;} else{slideNum++} } else if(arrow == "prew") { if(slideNum == 0){slideNum=slideCount-1;} else{slideNum-=1} } else{ slideNum = arrow; } $(".slide").eq(slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active"); } if(hwNeedLinks){ var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function(){ animSlide("next"); }) $("#prewbutton").click(function(){ animSlide("prew"); }) } var $adderSpan = ""; $(".slide").each(function(index) { $adderSpan += "" + index + ""; }); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide("next")}, hwTimeOut);} } $("#slider-wrap").hover(function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); rotator(); });
Сначала в переменных сохраняются настройки: hwSlideSpeed - скорость перелистывания слайдов, hwTimeOut - время спустя которое происходит автоматическая смена слайда, hwNeedLinks - управляет ссылками "Следующий " и "Предыдущий" - если значение этой переменной равно true, то эти ссылки будут отображаться, а если false, то соответственно их не будет (как на главной странице моего блога).
Далее мы устанавливаем необходимые CSS свойства для слайдов с помощью метода.css(). Блоки со слайдами мы накладываем друг на друга используя абсолютное позиционирование, затем скрываем их все.hide(), а затем показываем только первый. Переменная slideNum - это номер активного слайда, то есть счётчик.
Основная логика работы нашего jQuery слайдера - это функция animSlide. Она принимает один параметр. Если мы передадим в неё строки "next" или "prew", то сработают условные операторы и будет отображён соответственно следующий или предыдущий слайд. Если же мы пошлём в качестве значения цифру, то это число станет активным слайдом и он будет показан.
Таки образом эта функция скрывает текущий div, высчитывает новый и показывает его.
Обратите внимание, что методу.fadeIn(), который делает видимым активный слайд, задан второй аргумент. Это, так называемая функция обратного вызова. Она выполняется, когда слайд полностью появится. В данном случае это сделано для обеспечения автоматической прокрутки слайдов. Функция rotator, определённая ниже, вызывает снова функцию animSlide для перехода на следующий слайд через необходимый нам интервал времени: мы получим замыкание, обеспечивающее постоянную прокрутку.
Всё работает нормально, но нам нужно остановить выполнение автоматики, если пользователь подводит курсор к слайдеру, или нажимает кнопки. Для этого создана переменная pause. Если её значение положительно - true, значит автоматического переключения не будет. С помощью метода.hover(), мы указываем: очистить таймер если он запущен - clearTimeout(slideTime), и установить pause = true. А после отвода курсора, отключить паузу и запустить замыкание rotator().
Дополнительно нам нужно создать новые элементы на странице и поместить их в нужное место. Используя цикл each() для каждого слайда (div-а с классом.slide), создадим элемент span внутри которого бует число - номер слайда. Это число используется в функции анимации, для перехода к слайду с этим номером. Обернём всё в div с нужными классами, и в итоге получим такую разметку:
0 1 2 3
Казалось бы, зачем мы создаём разметку внутри скрипта, а не в HTML коде?. Дело в том, что например, если у пользователя отключены скрипты - он не увидит элементов, которые не будут работать, и это не введёт его в замешательство. Кроме того упрощается код, что неплохо для SEO.
В итоге разметка слайдера будет выглядеть примерно так (в качестве слайдов я использовал изображения, и установил 5 штук):
0
1
2
3
Ниже вы можете посмотреть, как работает наш jQuery слайдер на демо странице, и скачать все необходимые исходники.
На напоследок, пару моментов об интеграции этого слайдера с Drupal. Вы можете добавить этот код в файл шаблона, например в page.tpl.php, и прикрепить скрипт отдельными js-файлом к теме. Jquery в Drupal включен по умолчанию, но работает в режиме совместимости (). Есть два варианта доработки. Либо обернуть весь js код:
(function ($) { // Весь ваш код... })(jQuery);
или заменить символы $ во всём скрипте на jQuery. Вот так:
JQuery(document).ready(function(e) { jQuery(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow){ // и т. д.
В примере уже реализован первый метод.
Спасибо за прочтение! Оставляйте комментарии, приходите ещё. А так же вы можете подписаться на RSS, чтобы получать обновления блога первыми!
Добавлено: Это ещё не всё. Читайте . Там мы добавим новые возможности к данному скрипту.
Нужен простой слайдер с автоматической прокруткой. Приступим...
Описание работы слайдера.Слайды будут выстроены в линию, и через определенное время будут прокручиваться.
Красной рамкой показана видимая часть слайдера.
В конец слайдера нужно продублировать первый слайд. Это нужно для того, чтоб обеспечить прокрутку от третьего слайда к первому. Также нужно добавить последний слайд в начало для возможности прокрутки в обратном направлении от первого слайда к третьему. Ниже показана работа слайдера в прямом направлении.
Когда слайдер доходит до конца, на место последнего слайда мгновенно помещается его копия из начала слайдера. Затем цикл снова повторяется. Таким образом создается иллюзия бесконечного слайдера.
HTML разметкаДля начала сделаем простой слайдер с автоматической прокруткой. Для его работы нужно два контейнера. Первый будет задавать размер видимой области слайдера, а второй нужен для размещения в нем слайдеров. Разметка слайдера будет иметь следующий вид:
Контейнер.slider-box задает размеры слайдера. С помощью свойства overflow:hidden скрываются все элементы которые не входят в область внутри элемента.
Для контейнера.slider задается большая ширина. Это нужно для того, чтоб в него встрочку поместились все слайды.
Слайды выравниваются с помощью свойства float:left.
Ниже показано схематичное расположение блоков слайдера.
Движение слайдов будет осуществляться с помощью плавного изменения свойства margin-left контейнера.slider.
$(function () { var width= $(".slider-box" ) .width () ; // Ширина слайдера. interval = 4000 ; // Интервал смены слайдов. $(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Копия последнего слайда помещается в начало. $() .eq (1 ) .clone () .appendTo (".slider" ) ; // Копия первого слайда помещается в конец. // Контейнер.slider сдвигается влево на ширину одного слайда. setInterval("animation()" , interval) ; // Запускается функция animation(), выполняющая смену слайдов. } ) ; function animation() { var margin = parseInt($(".slider" ) .css ("marginLeft" ) ) ; // Текущее смещение блока.slider width= $(".slider-box" ) .width () , // Ширина слайдера. slidersAmount= $(".slider" ) .children () .length ; // Количество слайдов в слайдере. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Если текущий слайд не последний, { margin= margin- width; // то значение margin уменьшается на ширину слайда. } else { // Если показан последний слайд, $(".slider" ) .css ("margin-left" , - width) ; // то блок.slider возвращается в начальное положение, margin=- width* 2 ; } $(".slider" ) .animate ({ marginLeft: margin} , 1000 ) ; // Блок.slider смещается влево на 1 слайд. } ;В итоге получился простой слайдер с бесконечной автоматической прокруткой.
