Интересный и одновременно простой слайдер на чистом CSS3
1. Верстаем основу
Для реализации слайдера нам понадобится довольно простой набор тэгов, которые будут в свою очередь отвечать за элементы слайдера.
Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».
2. Оформляем слайдер
Здесь мы остановимся и немного рассмотрим css. Обратите внимание, что для некоторых свойств проставлены кроссбраузерные префиксы, чтобы все современные браузеры могли их понимать.
С оформлением фона и общими стилями всё понятно.
Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.
Радио-кнопки скрываем. Они нам понадобятся позже.
Результат на данный момент такой:
3. Оформляем слайды
Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно:
Для всех слайдов мы указали абсолютное позиционирование, чтобы можно было играть с эффектами появления. Размеры слайдов берутся из размера самого слайдера, чтобы не приходилось их прописывать в нескольки местах.
4. Делаем навигацию по слайдам
Так как радио-кнопки скрыты и нужны нам как переключатели, оформляем подготовленные лейблы:
Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:
5. Учим кнопки нажиматься
Пришло время научить слайдер переключать слайды по нажатию на определённую кнопку:
В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:
6. Оживляем слайдер
Ну, а теперь делаем так, чтобы слайды наконец-то переключались:
В общие стили слайдов мы добавляем свойства, при которых все слайды становятся невидимыми и уходят на задний план. Также мы добавили небольшое увеличение слайдов, пока они невидимы для придания интересного появления в слайдере.
Далее мы приписываем условие, при котором, в зависимости от активной кнопки навигации, в окне слайдера появлялся необходимый слайд.
Результат можно посмотреть здесь: демка слайдера.
Слайдер не требует js. Пускай он не умеет сам переключаться, но любому, кто знает основы CSS, transition и transform, будет легко придумать свои эффекты для переключения слайдов.
Простой слайдер изображений на CSS и Javascript
Автор уже опубликовал скрипт карусели, который также использует только CSS и Javascript. Теперь давайте рассмотрим скрипт слайдера. Он отличается от карусели тем, что одновременно виден только один элемент, а не несколько, и элементы не прокручиваются, а медленно замещаются одно другим. И ещё. В данном слайдере в качестве элементов используются только изображения (слайды), поэтому и называется он простой слайдер изображений.
Навигация осуществляется стрелками “Следующий элемент” или “Предыдущий элемент” и индикаторными точками. Стрелки и точки можно отключить в настройках скрипта. Элементы могут быть показаны с остановкой на первом и последнем элементе или в цикле, когда за последним элементом вновь следует первый. Можно включить автоматический просмотр (пролистывание) элементов, длительность просмотра (интервал между переключениями) регулируется. При наведении мыши на элемент пролистывание прекращается.
Слайдер автоматически подстраивается под любую ширину экрана любого устройства. Убедиться в этом можно сдвигая влево-вправо какую-либо из боковых сторон браузера.
HTML – код слайдера стандартный, за исключением одного: перед изображениями помещён экран, который представляет собой однотонный рисунок белого цвета. Все изображения и экран должны быть одного размера. Число изображений произвольное.
. Стрелки и индикаторные точки располагаются абсолютным позиционированием в соответствующих контейнерах. Для стрелок используются рисунки в виде треугольных скобок, которые, при желании, вы можете заменить своими рисунками. Точки генерируются программой, количество точек равно количеству изображений.
Все изображения располагаются “в стопочку”, одно над другим абсолютным позиционированием в левом верхнем углу объемлющего контейнера. Экран предотвращает схлопывание внешнего контейнера. Всем изображениям присваивается CSS-свойство opacity: 0, кроме первого элемента, которому программа инициализации присваивает opacity: 1, тем самым делая его видимым.
Пролистывание элементов осуществляется плавным изменением opacity из 1 в 0 для видимого элемента и из 0 в 1 для следующего за ним невидимого элемента. Тем самым видимый элемент становится невидимым, а невидимый видимым. Плавность перехода создаёт свойство transition с длительностью 1с и функцией перехода ease-in.
Для того, чтобы слайдер был адаптивным к любой ширине экрана, для изображений нужно указать CSS-свойство width: 100%. Для всех блочных контейнеров (div, ul, li и пр.) также width: 100% или, если нужна ширина в числовых единицах, то только max-width или min-width.
Стили, как обычно, подключаются в заголовке. Скрипт можно подключить по наступлению события onload или в конце HTML-разметки. Файл со скриптом слайдера может выглядеть так:
Вызов слайдера производится по имени класса sim-slider или по идентификатору. Во втором случае можно разместить несколько слайдеров на одной странице.
Touch slider на JavaScript
Когда я начинал изучать JavaScript, мне очень хотелось понять как работают и делаются слайдеры, которые можно перелистывать свайпами или мышью, но материалов с хорошим объяснением именно того, что мне надо, я не нашел. Через какое-то время мне удалось сделать нечто подобное. И теперь я хочу написать об этом статью, чтобы другим людям, которые хотят понять как это все работает и сделать touch события для слайдера (и не только), было проще разобраться. Я постараюсь излагать по порядку и подкреплять объяснения наглядными примерами.
Я не считаю себя большим специалистом в JavaScript, всегда есть чему учиться, поэтому если знаете как написать какие-то фрагменты кода лучше/проще/эффективнее — обязательно напишите в комментарии.
Можно сразу посмотреть пример.
1. Какой функционал будем делать?
Напишем с 0 простенький слайдер, который будет иметь следующие функции:
Звучит совсем просто и я постараюсь писать тоже просто и понятно.
Если кому-нибудь будет интересно, то мы можем добавлять потом какой-то функционал, вроде точек-переключателей, бесконечной прокрутки слайдов, вертикальной ориентации, переключение слайдов с помощью клавиатуры и т.д. В конце концов можно завернуть в компонент. Напишите об этом в комментарии. Если будет хотя бы несколько комментариев за какой-то функционал, то реализуем его.
2. Пишем HTML и CSS
Что должен представлять из себя слайдер с точки зрения HTML и CSS?
Видимая часть слайдера (1 слайд) будет размером 200х200 пикселей. Снизу расположим стрелки-переключатели слайдов.
В итоге у нас будет вот это:
Для бо́льшей простоты все размеры будут установлены через CSS.
HTML будет выглядеть так:
← и → это спецсимволы HTML-разметки, которые представляют собой стрелки, направленные в левую и правую сторону соответственно.
И выглядеть это будет так:
Без overflow: hidden :
С этим просто, теперь перейдем к обсуждению логики работы слайдера.
3. Как это будет работать?
Со свайпами посложнее, разберем подробнее.
Мы будем использовать три основных события в браузере. При касании пальцем срабатывает событие touchstart (при зажатии мыши mousedown ), при движении пальцем по экрану — touchmove ( mousemove ), при отпускании пальца — touchend ( mouseup ).
Нам нужно будет работать с координатами курсора event.clientX (место касания экрана) следующим образом:
Таким образом, при движении пальцем по экрану, мы каждый раз считаем смещение курсора по оси X, относительно его предыдущего положения и переменная posX2 всегда будет содержать количество пикселей, на которое мы сдвинули палец по экрану. Обычно это число от 0.5 до 10, в зависимости от размаха (если двинуть палец очень резко, то будут бо́льшие числа, а если палец двигать медленно, то меньшие).
При прекращении свайпа, мы вычитаем из начальной позиции курсора текущую и сравниваем полученное значение ( posFinal ) со значением «порога» сдвига слайда ( posThreshold ), который мы определим заранее.
Разберем подробнее с примерами. Некоторые действия мы пока опустим. Они не столь важны для этого объяснения, рассмотрим только самые основные:
Если со вторым условием else более-менее понятно, то с первым нужно разобраться подробнее.
Надеюсь у меня получилось объяснить правильно и понятно. Теперь приступим к написанию JavaScript.
4. Пишем JavaScript
Ниже я опишу кратко алгоритм еще раз, но помимо основного алгоритма работы слайдера, будет еще не мало разных условий для «фиксов» не нужного нам поведения, которое будет приводить к разным странностям, либо будет ломать слайдер. Сначала мы сделаем просто переключение слайдов свайпами, а фиксить будем уже потом. Я постараюсь делать все объяснения и приводить примеры, сохраняя всю последовательность.
Кратко об основном еще раз:
Полная версия кода без разрывов на пояснения будет снизу.
Полная версия кода с фиксами нежелательного поведния еще ниже
Первым делом получим наши элементы со страницы. При такой очевидной HTML-разметке хорошим вариантом было бы получить элементы через один querySelector и свойства DOM, но для простоты возьмем все через querySelector. Также объявим все нужные для работы переменные и основную функцию, которая будет переключать слайды. Пояснение я дам ниже.
Теперь надо сделать переключение стрелками. Привязываем обработчик событий клика на блок со стрелками, проверяем на какой из них произошел клик и вызыаем функцию переключения слайдов.
Теперь слайдер будет переключаться и с помощью стрелок. Обработчики событий снизу привязывают начальные функции на слайдер.
Итого
И вот слайдер полностью работает. Слайды перелистываются tocuh событиями, drag событиями и стрелками-переключателями. Но есть еще некоторое поведение, которое может его сломать, посмотрим на примерах ниже:
В этом случае нужно отслеживать координаты курсора и по оси Y, затем разрешать или запрещать свайп, в зависимости от того какое действие мы совершаем (свайп слайдера или скролл страницы).
В этом случае нужно на первом и последнем слайде отслеживать в какую сторону мы тянем слайд и завершать работу функции, если на первом слайде мы тянем вправо, а на последнем слайде тянем влево.
Для исправления этого поведения нужно объявить переменную allowSwipe и регулировать ей запрет свайпа.
Описывать это подробно я уже не буду. Просто выложу этот код ниже.
И в примере все эти условия уже будут сделаны. Также для наглядности меняется курсор на слайдере.
Слайдер на CSS
Хочу рассказать простой способ создания слайдера, без использования JS, при помощи анимации CSS.
1) Для начала напишем HTML, предположим что в слайдере будут сменять друг друга 4 изображения.
2) Далее оформим размеры блока, и еще несколько настроек, position: relative необходимо для того, чтобы создать контекст форматирования, дальше будет понятно зачем.
3) Также определим некоторые свойства для самих слайдов:
Как видно из CSS мы размещаем все слайды в верхнем левом углу слайдера, задавая, таким образом, одинаковую исходную позицию.
4) Далее нужно определить каким именно образом слайды будут сменять друг друга, не создавая разрывов – для каждого слайда я решил использовать следующую последовательность действий:
1. Слайд находится на исходной позиции, демонстрируется пользователю
2. Слайд двигается влево, пока полностью не выйдет за границу слайдера (у слайдера же, как выше указано, overflow: hidden, соответственно слайд не наезжает на окружающие объекты).
3. Далее слайд двигается наверх, пока нижняя граница слайда выйдет за верхнюю границу слайдера
4. Далее слайд двигается вправо, пока левая граница слайда, не выйдет за правую границу слайдера
5. Слайд спускается вниз на один уровень со слайдером
6. Слайд двигается на исходную позицию
Иначе говоря (кадры пока назову согласно номерам из списка выше):
5) Итак, стало понятно, как выглядит траектория слайда. Каждый слайд «объезжает» вокруг своего контейнера – слайдера – и возвращается на исходную. Таким образом мы можем бесконечно крутить любое количество слайдов. Но остался один нюанс, который является самым важным в этой схеме – время. Нужно правильно рассчитать раскадровку анимации по времени и установить правильную задержку для каждого слайда, чтобы не все одновременно ринулись анимироваться. Для того чтобы понять, как правильно выставит задержку и рассчитать время анимации, я пошел нижеописанным путем.
Давайте возьмем обозначения шагов из предыдущего пункта и разберемся что же происходит в каждом шаге. По сути, шаги №1, 2 и 6 – это те шаги, в которых слайд заходит в видимую область. Из того, что слайды должны двигаться неразрывно и, как бы, выталкивать друг друга из слайдера, можно заключить, что длительность шагов 2 и 6 должна быть равна. Сразу оговорюсь, что мне удалось удачно работать эту конструкцию только при том условии, что длительность первого шага также равна длительности 2-го и 6-го. То, что происходит во время шагов 3,4 и 5 – по сути, технические нужды, и для простоты, давайте объединим эти три шага в 1.
После упрощения имеем:
1. Шаг – слайдер демонстрируется на исходной
2. Шаг – слайдер сдвигается вправо
3. Шаг – слайдер совершает технические перемещения
4. Шаг – слайдер сдвигается влево, возвращаясь на исходную позицию
Для обеспечения безразрывного показа слайдов, в момент, когда слайд приступает к шагу 2, следующий слайд должен приступить к шагу 4.
Для того чтобы посчитать процент необходимого времени на каждую стадию, так сказать, вывел небольшую формулу, которая работает при условии, что 1,2 и 4 шаг равны.
Если время, на круг всей анимации – t;
Кол-во слайдов – n;
Длительность 3 шага – y;
Длительность шагов 1,2 и 4 – x;
Шаг задержки анимации для n-слайда – z;
То:
y = (100 * n — 150)/n;
x = (100 – y) / 3;
x и y необходимо перевести в проценты, и тогда:
z = 2 * x * t;
Для случая, когда n = 4, как в примере выше, получаем:
3-ий шаг – 62,5%, 1, 2 и 4-ый — по 12,5%. Шаг задержки анимации для каждого последующего слайда – 25%.
Какие интервалы будут между этапами внутри третьего шага – не имеет значения.
6) Теперь, когда мы все посчитали и знаем все величины можно привести финальный код.
Общий CSS для всех слайдов:
Вот, собственно и все! Спасибо всем, кто дочитал до конца.
Создание красивого контент-слайдера
Одна из наибольших проблем, стоящих в данный момент перед западной цивилизацией — это как отображать большое количество контента на небольшом пространстве.
Одно из эффективных решений заключается в размещении контента в последовательно выводимых блоках, используя то, что известно в отрасли ( и в сетевом сообществе ) под названием контент-слайдер. Вы, возможно, не слышали о нем, но я готов поспорить, что вы определенно должны были его видеть.
Чтобы освежить вашу память и дать представление о том, что мы будем создавать, ниже приведен пример контент-слайдера :
Кликните кружочки-ссылки ниже контейнера изображений, чтобы увидеть, как слайдер работает. В зависимости от того, какую ссылку вы нажмете, в контейнере будет выводиться соответствующий ей контент.
Обзор, как это работает
Во-первых, у нас есть контент, который мы хотим загнать в слайдер:
При просмотре слайдера, вы видите одновременно только один блок контента. Если не предпринять дополнительных шагов, то выводимый одновременно контент в своем оригинальном размере может превратить слайдер во что-то очень визуально непривлекательное.
Мы исправим это в два этапа. Во-первых, мы обернём содержимое в контейнер, который имеет такой же размер, как один из блоков контента:
После того, как мы заключили контент в контейнер, обрезаем все элементы вокруг блока контента, чтобы обеспечить вывод только одного блока одновременно:
Следующим шагом является обеспечение возможности просматривать остальные части контента. Это можно сделать различными способами. В этой статье мы используем набор круглых ссылок, по которым вы можете кликать:
Контент
Эта разметка не делает ничего, кроме как задает структуру документа, но это первый шаг, который позволит далее добавить наш контент. Давайте сделаем это в следующем разделе.
Контент ( на этот раз настоящий )
Между тегами style добавьте следующие правила для стилей, которые задают форму и цвет нашего контента:
Теперь при просмотре страницы вы увидите нечто похожее на то, что приведено на скриншоте:
Вы увидите четыре больших прямоугольных блока, расположенных аккуратно бок о бок. В зависимости от разрешения экрана и размера окна браузера, вам, возможно, потребуется прокрутить немного вправо или влево, чтобы увидеть все прямоугольники.
Что мы сделали
На данный момент, наш элемент div надлежащим образом подогнан и выстроен. Жаль, что он полностью невидим:
Как вы можете видеть, эти правила стилей определяют только цвет фона и фоновое изображение для нашего контента. С этого момента элементы div больше не невидимы. Они выводятся в виде прямоугольников разного цвета с размером 550 на 350 пикселей.
Этот элемент обертывает весь наш контент в один контейнер. Это не тот контейнер, который я имел в виду в обзоре, когда говорил об обрезании всего содержимого вокруг блоков контента.
Этот контейнер предназначен немного для другого. Он в буквальном смысле просто оборачивает контент для того, чтобы мы могли просматривать его весь.
Соответствующее правило стилей #wrapper выполняет эту задачу:
Сначала это правило стилей определяет ширину элемента оболочки в 2200 пикселей. То есть общую ширину нашего контента … которую вы получите умножив 4 ( по количеству элементов div ) на 550 пикселей.
Обрезка контента
В предыдущем разделе, мы позаботились о получении блоков контента, которые будут выводиться. Следующее, что мы собираемся сделать, это обрезать наш контент, таким образом, чтобы в любой момент времени был виден только один блок слайдера.
Сейчас, если вы просмотрите наш обернутый ( еще раз ) контент, вы не увидите ничего нового. Просто укладка элементов в еще один div ничего значимого не делает — тем более ничего из того, что мы хотим сделать, чтобы обрезать контент.
Чтобы добавить это значимое действие, создайте следующее правило стиля #contentContainer :
Обратите внимание, что вы задаете размер элемента contentContainer 550 пикселей на 350 пикселей. То есть точно такой же размер, какой имеет каждый из блоков контента. Чтобы слайдер немного выделялся, мы задаем черную рамку шириной в 5 пикселей.
Все вместе дает нам следующую картину в браузере:
Ссылки навигации
Вот мы и добрались до них! Мы все ближе к тому, чтобы получить полностью рабочий слайдер. В этом разделе мы займемся ссылками навигации — элементами, которые вы нажимаете, чтобы увидеть другие блоки контента.
Остальной код определяет внешний вид каждой ссылки, а также соответствующее ей выделение при наведении курсора мыши.
На одном моменте все же стоит остановиться подробнее.
Это связано с двумя правилами стилей, которые относятся к классу active :
Если сейчас вам трудно во всем этом разобраться, не волнуйтесь, очень скоро мы рассмотрим это подробно.
На данный момент наш слайдер выглядит следующим образом:
Если ваш слайдер выглядит не так, то высока вероятность того, что вы допустили опечатку … или что-то еще. Так и случилось?
Создание самого слайдера
Хорошо, на данный момент у нас есть что-то, что выглядит очень похоже на рабочий слайдер. Однако при нажатии любой из ссылок абсолютно ничего не происходит.
Добавление JavaScript
После того, как вы добавили этот код, просмотрите документ в браузере и нажмите на любую из ссылок-кружков. Вы увидите, что в слайдере выводится контент, соответствующий этой ссылке. Конечно, это уже огромный прогресс.
Все, что нам осталось сделать, это обеспечить плавный переход вместо резкой смены слайдов.
Добавление перехода
Найдите правило стиля #wrapper и добавьте в него одну строку:
Во всяком случае, если вы сейчас просмотрите документ, вы должны иметь рабочий контент-слайдер, который плавно выводит контент при нажатии на любую из ссылок навигации. Это должно быть идентично тому, что вы видели в примере, размещенном в самом начале этой статьи.
Разбор кода (и всего остального!)
Теперь, когда у нас есть работающий контент-слайдер, давайте попробуем разобраться с самого начала, как код связывает все это вместе.
Что на самом деле происходит
После загрузки контент-слайдера вы видите, как отображается первый блок контента. Остальной контент обрезан и скрыт от глаз:
Нажатие любой ссылки выводит соответствующий ей блок контента. Какую часть контента нужно вывести в видимой области, слайдер знает благодаря тесной связи между каждой ссылкой навигации и позицией в пикселях каждого блока контента.
Давайте попробуем разобраться в этой связи. Есть несколько вещей, которые мы знаем. Мы знаем, что каждый из наших блоков контента имеет 550 пикселей в ширину. Мы также знаем, что наш первый блок контента установлен горизонтально на 0 пикселей.
Откуда мы знаем это? Все наши блоки контента обернуты внутри элемента оболочки, который охватывает весь наш контент, и левый край элемента оболочки имеет позицию 0 пикселей:
Зная это, мы можем вычислить позиции для всех блоков контента следующим образом:
Первый блок расположен в точке 0 пикселей. Ширина первого блока контента — это позиция второго блока. То есть 550 пикселей. Каждый последующий блок имеет позицию на 550 пикселей больше, чем предыдущий.
Так как мы знаем точное положение в пикселях каждого блока контента, мы можем использовать эту информацию, чтобы указать контент-слайдеру сдвинуть элемент оболочки в нужное место, так чтобы была видна нужная нам часть контента.
Атрибут data-pos!
Прекрасно, теперь нам известны позиции всех блоков контента. Что мы еще не рассмотрели, так это как знание позиции блока контента в пикселях поможет нам вывести в окне слайдера нужный блок.
Как мы можем указать, что при нажатии на ссылку должен выводиться тот или иной блок контента? Просто. Каждая ссылка содержит точную позицию ( в пикселях ) блока контента, которому она соответствует:
Например, вот что происходит после нажатия на третью ссылку:
Для третьей ссылки определено значение data-pos — 1100 пикселей. Это соответствует тому, на сколько пикселей нужно будет переместить оболочку контейнера, чтобы в видимой области был выведен третий блок контента. Нажатие любой другой ссылки установит для свойства элемента оболочки значение, содержащееся в атрибуте data-pos этой ссылки.
Это все о JavaScript
Начнем с самого верха:
querySelector и querySelectorAll
Вы увидите, что обе эти переменные мы будем использовать позже, так что помните о них.
Дальше у нас следует кое-что таинственное:
Переменная activeLink используется для хранения позиции контента, отображаемого в данный момент. Вы лучше поймете смысл этой переменной, когда я поясню ее в действии чуть позже.
Следующий набор строк — это цикл for:
Следующая строка вызывает целый ряд изменений:
После того, как выполнена эта строка кода, помните, мы обращали внимание на следующие правила стиля?
Что ж, теперь эти правила стиля вступают в действие и помогают выделить активную ссылку навигации из списка других неактивных ссылок. Немного позже мы вернемся к этим правилам стиля и рассмотрим их более подробно.
Другая важная вещь, которую делает эта функция, это то, что она изменяет на activeLink значение свойства itemID выбранного элемента. Это обеспечивает то, что activeLink всегда указывает на номер, который соответствует блоку контента, выводимому в данный момент в слайдере.
Вот, где происходят интересные изменения! Давайте немного перепрыгнем вперед и рассмотрим функцию changePosition :
Эта функция делает две вещи:
І. Переключает визуальное отображение выбранной ссылки, чтобы указать, что в настоящее время она является активной.
II. Устанавливает позицию элемента оболочки.
Давайте рассмотрим эти две вещи более подробно.
Переключение визуального отображения выбранной/активной ссылки
Чтобы вам было понятнее, то о чем я говорил перед этим, ваши ссылки навигации могут быть в одном из двух состояний. Эти состояния предназначены для того, чтобы пользователь видел, какой блок контента в настоящее время является активным:
На этом рисунке вы можете сразу определить, что блок контента, соответствующий четвертой ссылке в данный момент является активным, а первые три ссылки неактивны.
В любом случае вы помните, что ранее мы вызвали следующие два правила стиля:
В нашей функции setClickedItem ( также известной, как функция, которая будет вызываться в результате нажатия на ссылку ), мы сначала вызываем removeActiveLinks :
Эта функция отвечает за удаление класса active для всех ссылок навигации:
Таким образом, мы рассмотрели, как удалить класс active у всех ваших ссылок. Добавление класса в свою очередь происходит очень просто:
Установка позиции оболочки
Давайте рассмотрим следующий фрагмент:
Как это связано с реализацией эффекта слайдера? Вы помните, что некоторое время назад мы добавили к стилю #wrapper одно правило?
Я не знаю, как насчет вас, но для меня это просто удивительно. Это то, что мы не могли себе представить несколько лет назад, когда нам приходилось прилагать много усилий и писать код для обработки эффекта слайдера. Это то, что делает наш контент-слайдер красивым.
Вот так вот просто мы только что создали с нуля контент-слайдер и ( что более важно ) узнали, как он работает.
Улучшение контент-слайдера
Прокручивание с помощью преобразования translate3d
Это особенно актуально для мобильных устройств, при низкой скорости Интернет-соединения часто использующих аппаратные средства, и здесь прерывистая, скачкообразная смена слайдов может быть особенно заметной.
Особенностью данной функции является также то, что в результате ее использования браузер аппаратно ускоряет изменение позиции. Чего же мы ждем?
Таким образом, с помощью transform задается исходная позиция элемента оболочки.
Первый этап: Добавление вспомогательных элементов
На первом этапе добавляем следующий вспомогательный код ниже основного кода, который мы имеем на текущий момент:
Этот код поможет нам установить свойство transform с помощью вендорных префиксов, таким образом, оно будет поддерживаться максимальным количеством браузеров.
Второй этап: внесение Ahoy!
В функции changePosition найдите следующие строки кода:
Замените их следующим кодом:
Если вы теперь просмотрите документ, то увидите, что блоки контента в слайдере перепрыгивают с одного места в другое.
Как только вы внесете эти изменения, наш слайдер снова будет работать примерно таким же образом, как и до того.
Разница заключается только в том, что при смене слайдов теперь используется аппаратное ускорение, и она будет происходить теперь более плавно и поддерживаться на большем количестве устройств.
Автоматическая смена слайдов с интервалом в несколько секунд
В данный момент слайды у нас меняются только когда мы нажимаем на одну из ссылок навигации. Но это не единственный способ работы слайдера. Многие контент-слайдеры автоматически прокручивают контент каждые несколько секунд, при этом также существует возможность перейти к конкретному разделу с помощью ссылок навигации.
Пример одного из таких контент-слайдер вы видите ниже:
Да, это наш старый слайдер, в который внесены небольшие изменения, чтобы контент мог автоматически прокручиваться в контейнере. Угадайте, что мы будем делать дальше?
Заставим слайды прокручиваться автоматически!
В этом нам поможет функции setInterval. Основная задача этой функции — обеспечить выполнение кода через равные промежутки времени:
Каждые несколько секунд ( или сколько вы зададите в качестве значения интервала ), функция setInterval указывает нашему слайдеру переходить к следующему блоку контента.
Когда контент закончился, слайдер через цикл переходит к началу контента и начинает все заново. Делается это довольно несложно. От вас требуется только знание нескольких приемов и четкое понимание того, как работает ваш контент-слайдер.
Первое изменение, которое нам нужно внести, это добавить дополнительный код, необходимый, чтобы выполнить эту работу. В конце уже имеющегося у вас кода добавьте следующие строки:
Что означает весь этот код, мы рассмотрим в ближайшее время. Сейчас добавьте все это. После того, как вы сделаете это, просмотрите контент-слайдер в браузере. Вы увидите, что слайды контента меняются в контейнере каждые две секунды.
Существует только одно значительное изменение, которое нам осталось внести. Сейчас слайды сменяют друг друга каждые две секунды, независимо от того, нажали ли вы ссылку навигации или нет.
Правильнее будет сделать так, чтобы после нажатия одной из ссылок таймер сбрасывался на 0. Чтобы внести это изменение, добавьте следующую строку кода в обработчик событий setClickedItem :
После этого контент-слайдер будет вести себя должным образом, когда вы вмешиваетесь и нажимаете на ссылку навигации. Ура!
Пояснение автоматической смены слайдов
Итак, нам осталось разобраться только с одной вещью. Давайте быстро рассмотрим код, который мы только что добавили, и поймем, почему он делает то, что он делает.
Начнем с функции goToNextItem/span> :
Эта функция отвечает за отслеживание контента, который отображается в данный момент, и того, что последует за ним. Чтобы лучше понять, что происходит, взгляните на приведенное ниже изображение:
Оператор if функции goToNextItem просто проверяет, остался ли еще контент или слайдеру следует вернуться в начало:
В данный момент путь, по которому обрабатывается наш код, ничем не отличается от того, как он обрабатывался при нажатии на ссылку вручную.
Итак … мы рассмотрели код в функции goToNextItem для перемещения к следующей части контента. Чтобы вызвать этот слайд автоматически задействуются следующие строки:
Просто добавив эту функцию ( и вызвав ее ), вы заставите ваш контент-слайдер начать автоматически прокручивать блоки контента.
Осталось только разобраться с тем, как сбрасывается таймер ( который я назвал setInterval ), когда вы вручную нажимаете ссылку. Чтобы справиться с этим, задействуется оставшийся у нас код.
Логика проста. Таймер останавливается, когда вы вручную выбираете, какой блок контента нужно вывести в слайдере:
Заключение
Вот и все, мы рассмотрели, как создать красивый контент-слайдер, используя только
В то время как сам слайдер определяется не таким уж и большим количеством кода, разбор концепций, которые лежат в его основе, возможно, займет у вас некоторое время. Я разместил в статье ссылки на другие источники, которые освещают темы, затронутые мной лишь поверхностно. Вы можете прочесть их, когда у вас будет для этого время.
Контент-слайдеры бывают разных форм и размеров. Некоторые состоят из нескольких уровней, где смена контента может осуществляться как по вертикали, так и по горизонтали.