Как сделать слайдер на сайте

Введение в разработку слайд-шоу на JavaScript

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

JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.

В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.

Структура HTML

Разметка HTML должна быть такой, чтобы страница оставалась читаемой и без CSS и JS. Поэтому нужно разобраться, какие компоненты будут составлять нашу структуру. Обычно это:

1) самый внешний контейнер
2) внутренний враппер
3) несколько элементов-слайдов
4) враппер для ссылок на страницы
5) две кнопки «предыдущая» и «следующая»

Компоненты 2, 4 и 5 необязательные, поскольку:

— слайды можно обернуть и в один элемент. Это делают, когда переход между слайдами делается через fade in / fade out
— ссылки на страницы и кнопки можно опустить, если слайд-шоу автоматическое, и происходит без вмешательства пользователя

Пример возможной HTML-структуры:

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

Элементы с кнопками используются вместо ссылок, поскольку ссылки здесь не подходят, а с кнопками мы будем работать из скрипта (подробности читайте в материале You can’t create a button).

Если в слайдах содержатся только картинки, можно слегка поменять структуру:

Не забудьте добавить осмысленное значение атрибуту alt.

Для использования ссылок на страницы можно сделать следующее:

Теперь каждая ссылка ведёт на свой слайд благодаря анкору. Это специально сделано так, чтобы страница работала без JS.

Бывают слайд-шоу, комбинирующие ссылки и управление:

Отметим использование атрибутов «data» – некоторые слайд-шоу умеют вставлять картинки как фон, и эти атрибуты будут использованы в скрипте как места для связи фона и слайда.

Использование списков

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

Если порядок слайдов хорошо определён (к примеру, в презентации), можно использовать нумерованные списки

Т.к. слайд-шоу будет идти справа налево, то у внешнего контейнера будет фиксированный размер, а внутренний будет шире, поскольку он содержит все слайды. Виден будет первый слайд. Это задаётся через overflow:

Стили внутреннего враппера включают:

— большая ширина
— фиксированная высота, максимальная высота слайда
— position: relative, что позволит создать перемещение слайдов
— CSS transition left, что позволит сделать движение плавным. Для простоты мы не указали все префиксы. Для этого также можно использовать CSS transformations (вместе с translation).

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

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

Навигация осуществляется через кнопки “Предыдущий” и “Следующий”. Обнуляем их стили по умолчанию и назначаем свои:

При использовании ссылок на страницы вместо кнопок можно сделать следующие стили:

Эти классы будут назначены из скрипта динамически.

Такой подход годится для эффекта скольжения. Если мы хотим достичь эффекта исчезновения и появления, надо поменять стили, поскольку float добавляет горизонтальные отступы между слайдами. То есть, слайды на одной линии нам не нужны – нам нужна «пачка» слайдов:

Для скрытия слайдов мы используем свойство opacity, поскольку программы для чтения данных с экрана пропускают содержимое элементов, у которых установлен display: none (см. CSS in Action: Invisible Content Just for Screen Reader Users).

Благодаря контекстному позиционированию CSS мы создали «пачку» слайдов, где последний слайд в исходнике оказывается впереди других. Но нам не это нужно. Для сохранения порядка слайдов нам надо спрятать все слайды, кроме первого.

JS задействует CSS transition, меняя значение свойства opacity у текущего слайда, и обнуляя это значение у всех остальных.

Проблемы с IE9

IE9 не поддерживает CSS transitions. Изменение значения свойства мгновенно поменяет его внешний вид. Для плавности нам придётся воспользоваться jQuery. Подробности по возможным решениям читайте в этой ветке на Stack Overflow.

Код на JavaScript

Слайд-шоу без разбивки на страницы

Слайд-шоу без разбивки на страницы работают по нажатию кнопок “Следующий” и “Предыдущий”. Их можно рассматривать как операторы инкремента и декремента. Всегда есть указатель (или курсор), который будет увеличен или уменьшен каждый раз по нажатию на кнопки. Начальное его значение 0, а цель – выбирать текущий слайд так же, как выбираются элементы массива.

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

Вместе с указателем мы используем метод jQuery .eq() для получения текущего слайда. На чистом JS это выглядит так:

Помните — NodeList использует индексы так же, как массив. Ещё один способ выбрать текущий слайд – селекторы CSS3:

Селектор CSS3 :nth-child() считает элементы с 1, поэтому нужно добавить единичку к указателю. После выбора слайда его родительский контейнер надо сдвинуть справа налево. В jQuery можно использовать метод .animate():

В обычном JS нет метода .animate(), поэтому мы используем переходы CSS:

Теперь можно менять свойство left динамически через объект style:

Теперь надо сделать событие клика для каждого элемента управления. В jQuery можно взять метод .on(), а в чистом JS — метод addEventListener().

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

А на чистом JS это выглядит так:

Примеры

Слайд-шоу с разделением на страницы

В таком слайд-шоу каждая ссылка отвечает за один слайд, поэтому указатель не нужен. Анимации не меняются – меняется способ, которым пользователь перемещается по слайдам. Для jQuery у нас будет следующий код:

В этом случае каждый анкор соответствует ID определённого слайда. В чистом JS можно использовать как его, так и атрибут data, хранящий числовой индекс слайдов внутри NodeList:

Начиная с IE10 можно управлять классами через classList:

А с IE11 атрибуты data можно получать через свойство dataset:

Примеры

Слайд-шоу с разделением на страницы и элементами управления

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

Если мы нажимаем на ссылку №3, то указатель надо установить в 2 – чтобы, нажав на «Предыдущий», мы попали на второй слайд. То есть, нужно делать синхронизацию.

Синхронизировать это можно через номерной индекс каждой ссылки в DOM. Один линк – один слайд, поэтому их индексы будут 0, 1, 2 и т.д.

На jQuery код будет такой:

Сразу видно, что изменилась видимость курсора – теперь индекс объявлен как свойство объекта слайд-шоу. Таким образом мы избегаем проблем с областью видимости, которые могут быть созданы обратными вызовами в jQuery. Теперь курсор доступен везде, и даже вне пространства имён плагина, поскольку он объявлен как публичное свойство объекта slideshow.

Метод .index() даёт числовой индекс каждой ссылки.

В чистом JS нет такого метода, так что проще использовать атрибуты данных:

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

Примеры

Разбираемся с размерами

Вернёмся-ка к следующему правилу CSS:

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

На jQuery это просто:

Берём ширину окна и задаём ширину каждого слайда. Общая ширина внутреннего враппера получается перемножением ширины окна и количества слайдов.

Здесь начальная ширина задана шириной каждого слайда. Нужно только задать общую ширину враппера.

Теперь внутренний контейнер достаточно широк. На чистом JS это делается примерно так же:

Эффекты исчезновения

Эффекты исчезновения (fade) часто используются в слайд-шоу. Текущий слайд исчезает, и появляется следующий. У jQuery есть методы fadeIn() и fadeOut(), которые работают как со свойством opacity, так и с display, поэтому элемент удаляется из страницы по завершению анимации (display:none).

В чистом JS лучше всего работать со свойством opacity и использовать стек позиционирования CSS. Тогда изначально слайд будет видимым (opacity: 1), а другие — спрятаны (opacity:0).

Следующий набор стилей демонстрирует такой способ:

В чистом JS необходимо зарегистрировать переход CSS каждого слайда:

С jQuery для использования методов fadeIn() и fadeOut() надо менять opacity и display:

В jQuery код следующий:

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

В JavaScript это будет:

Примеры

Медийные элементы: видео

Мы можем включать видео в слайд-шоу. Вот пример слайд-шоу с видео от Vimeo:

Видео включаются через iframe. Это такой же заменяемый inline-block, как и картинка. Заменяемый – потому, что содержимое взято из внешнего источника.

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

Примеры

Автоматические слайд-шоу

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

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

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

Оба параметра метода .stop() установлены в true, т.к. нам не нужно создавать очередь анимации из нашей последовательности.

На чистом JS код становится проще. Регистрируем переход CSS для каждого слайда с определённой длительности:

И код будет следующим:

Примеры

Навигация с клавиатуры

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

Для этого мы обратимся к свойству keyCode объекта event. Оно возвращает код нажатой клавиши (список кодов).

Те события, что мы прикрепляли на кнопки «Предыдущий» и «Следующий», теперь можно прикрепить на клавиши «влево» и «вправо». jQuery :

На чистом JS вместо простого метода .trigger() придётся пользоваться dispatchEvent():

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

Примеры

Обратные вызовы

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

В jQuery можно создать обратный вызов так:

В этом случае обратный вызов – это функция из .animate(), которая принимает текущий слайд как аргумент. Вот, как это можно использовать:

Функция обратного вызова определена как второй параметр конструктора. Использовать её можно так:

Примеры

Внешние API

Пока наш сценарий работы прост: все слайды уже есть в документе. Если нам надо вставлять в него данные снаружи (YouTube, Vimeo, Flickr), нам нужно на лету заполнять слайды по мере получения внешнего контента.

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

Это может быть gif или анимация на чистом CSS:

Шаги будут такие:
— запросить данные извне
— спрятать загрузчик
— разобрать данные
— построить HTML
— вывести слайд-шоу
— обрабатывать слайд-шоу

Допустим, мы выбираем самые свежие видео пользователя с YouTube. jQuery:

На чистом JavaScript есть лишний шаг – создание метода получения JSON:

Затем процедуры получаются схожие:

Примеры

Заключение

Слайд-шоу – интересная возможность улучшить пользовательский опыт. Если не перебарщивать с ними, они позволят пользователю быстро найти нужный контент на сайте всего за несколько кликов. Также слайд-шоу навроде Revolution Slider или Nivo Slider демонстрируют, как можно обогатить визуальную составляющую сайта. Но для построения таких сложных проектов сначала необходимо разобраться с основами.

Как сделать слайдер в HTML на своем сайте: краткая инструкция

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

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

Слайдер для сайта — это норма

• ручное и автоматическое перелистывание;

• возможность перейти по ссылке, нажав на сам слайдер;

• наличие кнопок с призывом действия;

• анимационные эффекты при смене слайдов;

• и мн. др.

• за место, где вывести слайдер , отвечал HTML;

• за то , как визуально выглядит слайдер , отвечал CSS;

• за анимационные сценарии и дополнительные функции отвечал JavaScript.

Как реализовать слайдер для своего сайта

• воспользоваться готовым решением, если это позволяет сделать ваш сайт;

• сделать слайдер на сайте самостоятельно, например , применяя HTML и CSS.

Г отовое решение слайдера для сайта

• установить соответствующий плагин из официального репозитория вашей CMS;

• активировать плагин;

• настроить слайдер в админке вашего сайта, добавив в него контент для вывода;

• вывести слайдер в нужном месте при помощи шорткода, кода HTML или функции.

Как сделать слайдер на своем сайте HTML при помощи CSS

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

Делаем простой адаптивный слайдер на CSS

Для начала нам нужен будет HTML слайдера. Например, у нас есть:

<body>

<div >

<input type=»radio» name=»kadoves» checked>

<input type=»radio» name=»kadoves» >

<input type=»radio» name=»kadoves» >

<div >

<label for=»slaid1″></label>

<label for=»slaid2″></label>

<label for=»slaid3″></label>

</div>

<div >

<div >

<img src=»https://codernet.ru/articles/web/kak_sdelat_slajder_v_html_na_svoem_sajte_kratkaya_instrukcziya/img1.jpg»/>

<img src=»https://codernet.ru/articles/web/kak_sdelat_slajder_v_html_na_svoem_sajte_kratkaya_instrukcziya/img2.jpg»/>

<img src=»https://codernet.ru/articles/web/kak_sdelat_slajder_v_html_na_svoem_sajte_kratkaya_instrukcziya/img3.jpg»/>

</div>

</div>

</div>

</body>

Чтобы все заработало как надо, необходимо добавить следующий CSS:

.adaptivSlayder <

position: relative;

max-width: 710px;

margin: 65px auto;

box-shadow: 0 9px 18px -4px rgba(0, 0, 0, 0.69);

>

.adaptivSlayder input[name=»kadoves»] <

display: none;

>

.kadoves <

position: absolute;

left: 0;

bottom: -35px;

text-align: center;

width: 100%;

>

.kadoves label <

display: inline-block;

width: 7px;

height: 7px;

cursor: pointer;

margin: 0 2px;

box-shadow: 0 0 3px 0 rgba(0, 0, 0, .7);

border-radius: 55%;

border: 4px solid #2f363c;

background-color: #738290;

>

#slaid1:checked

.kadoves label[for=»slaid1″] <

background-color: white;

>

#slaid2:checked

.kadoves label[for=»slaid2″] <

background-color: white;

>

#slaid3:checked

.kadoves label[for=»slaid3″] <

background-color: white;

>

.adaptivSlayderlasekun <

overflow: hidden;

>

.abusteku-deagulus <

display: flex;

width: 100%;

transition: all 0.6s;

>

.abusteku-deagulus img <

width: 100%;

flex-shrink:0;

>

#slaid1:checked

adaptivSlayderlasekun abusteku-deagulus <

transform: translate(0);

>

#slaid2:checked

.adaptivSlayderlasekun .abusteku-deagulus <

transform: translateX(-100%);

>

#slaid3:checked

.adaptivSlayderlasekun .abusteku-deagulus <

transform: translateX(-200%);

>

В CSS показан общий принцип реализации слайдера. Вы смело можете писать туда свои значения, чтобы слайдер «как родной» вписался в ваш проект.

Заключение

Слайдер — это способ задержать внимание посетителя вашего ресурса, поэтому если дизайн вашего сайта позволяет использовать слайдер, то почему бы этим не воспользоваться. Тем более что реализовать слайдер можно на чистом CSS и HTML.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

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

В этой статье рассмотрим, как подключить и настроить простой адаптивный слайдер на сайт, написанный на чистом CSS и JavaScript. Посмотрим примеры его использования для ротации различного контента: картинок, отзывов, текстовой информации и товаров.

Демо слайдера SimpleAdaptiveSlider

Демо слайдера SimpleAdaptiveSlider без зацикливания:

Демо слайдера SimpleAdaptiveSlider с бесконечной прокруткой (с зацикливанием):

Загрузка и подключение слайдера

SimpleAdaptiveSlider — это простой адаптивный слайдер для сайта, написанный автором этого ресурса на чистом CSS и JavaScript.

Проект слайдера расположен на GitHub. Данный слайдер распространяется под лицензией MIT. Следовательно, его можно использовать бесплатно как в личных, так и в коммерческих проектах. Поблагодарить автора и поддержать дальнейшее развитие этого проекта можно здесь.

SimpleAdaptiveSlider имеет следующие характеристики:

• лёгкий (без jQuery), минимизированный размер JS кода составляет всего 8Кбайт;
• адаптивный, т.е. динамически подстраивающийся под заданные размеры viewport;
• без зацикливания, так и с бесконечной прокруткой;
• с автоматической сменой слайдов через определённые интервалы времени;
• возможность перелистывания слайдов посредством свайпа;
• в контенте слайда можно размещать различную информацию (текстовую, изображения, отзывы, товары и т.д.).

Коды слайдера состоят из CSS и JavaScript файлов:

и его минимизированная версия simple-adaptive-slider.min.css и его минимизированная версия simple-adaptive-slider.min.js;

Скачать файлы SimpleAdaptiveSlider можно по этим ссылкам или посредством загрузки всего проекта ui-components с GitHub.

Для скачивания файлов через ссылки, нужно открыть страницу и выбрать в контекстном меню браузера пункт «Сохранить как»:

В проекте «itchief/ui-components» этот слайдер расположен в папке «simple-adaptive-slider».

Для подключения слайдера к странице необходимо:

1. Подключить CSS и JavaScript файлы к странице:

2. Вставить в необходимое место страницы следующую разметку слайдера (html код):

В этой разметке карусель состоит из 4 слайдов. Контент слайдов необходимо помещать в элементы « .itcss__item ».

Инициализация и настройка слайдера

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

Инициализация слайдера осуществляется посредством создания нового экземпляра объекта типа ItcSimpleSlider :

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

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

Настройка слайдера осуществляется с помощью 2 аргумента. Его нужно передавать в формате объекта и он имеет 4 ключа:

• loop — отвечает за зацикленность; по умолчанию этот ключ имеет значение true ; если слайдер не должен быть бесконечным, т.е. быть без зацикливания loop необходимо установить значение false ;
• autoplay — включает автоматическую смену слайдов; время через которое это необходимо выполнять определяется ключом interval ;
• interval — время в миллисекундах через которое нужно автоматически переключать слайды; по умолчанию — 5000, т.е. 5 секунд;
• swipe — определяет можно ли слайды менять свайпом; по умолчанию включено.

Значение ключей во 2 аргументе по умолчанию:

Пример инициализация слайдера без зацикливания:

Пример инициализация слайдера с автоматической сменой слайдов через 10 секунд:

Методы слайдера

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

• next — перейти к следующему слайду;
• prev — перейти к предыдущему слайду;
• autoplay — включение и выключение автоматической смены слайдов;

Чтобы эти методы были доступны нужно при инициализации слайдера сохранить ссылку на созданный экземпляр объекта ItcSimpleSlider в некоторую переменную:

Пример использования методов:

Пример с использованием методов слайдера

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

Для отключения индикаторов добавим в CSS:

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

Примеры использования слайдера

1. Использование ItcSimpleSlider для ротации изображений:

2. Применение слайдера для текстовой информации:

3. Создание слайдера для отзывов:

4. Настройка слайдера для ротации товаров:

5. Слайдер с миниатюрами:

6. Слайдер, в котором при клике по кнопке расположенной в левом нижнем углу открывается ещё один слайдер в popup:

Краткое описание исходных кодов и принципа работы

HTML структура слайдера:

В разметке корневой элемент — это тег <div> с классом itcss .

Внутри него находятся:

• .itcss__wrapper — wrapper (обёртка для слайдов);
• 2 элемента .itcss__control — ссылки, оформленные в виде кнопок для перехода соответственно к предыдущему и следующему слайду;
• точки или другими словами индикаторы .itcss__indicators — добавляются динамически посредством JavaScript кода;

Обертка .itcss__wrapper содержит внутри .itcss__items , а он в свою уже очередь непосредственно сами item (слайды). Это элементы — .itcss__item .

Индикаторы ( .itcss__indicators ) выполнены в виде нумерованного списка. Каждый элемент li внутри него содержит атрибутом data-slide-to . В нём содержится индекс слайда. Он используется в JavaScript коде и определяет слайд на который нужно перейти в случае нажатия на него. Активный индикатор отмечается посредством класса itcss__indicator_active .

Кнопки «назад» и «вперед» размечены с помощью элемента a .

В определённый момент времени в слайдере отображается только один item, который не сдвинут относительно .itcss__wrapper . Все другие слайды сдвинуты. Скрытие слайдов выходящих за пределы .itcss__wrapper осуществляется с помощью свойства overflow: hidden .

Перемещение item выполняется с помощью CSS трансформации. Для этого к .itcss__items и .itcss__item в нужные моменты времени добавляется CSS-свойство transform: translateX(. ) с нужным значением.

Например, когда к .itcss__items добавляется transform: translateX(. ) со значением -100% , то браузер осуществляет переход к следующему слайду, а если наоборот, 100% — то к предыдущему.

Анимация переход осуществляется помощью CSS свойства transition :

Скрипт слайдера написан на «чистом» JavaScript без использования jQuery и других каких-либо библиотек.