Слайдер на чистом javascript

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

По сути слайдер готов:

Можно дополнить кнопками навигации. Для этого немного поправим верстку и стили. В блок "slider" добавим:

Новые стили для кнопок:

Логика для навигации простая, находим dom элементы кнопок, вешаем на них события клика, при нажатии меняем индекс активного слайда на индекс нажатой кнопки, для этого можно использовать i прямо из цикла. И вызываем функцию для изменения положения элементов.

Выглядит все это вот так:

Также можно реализовать автопрокрутку. Для этого добавляем в js код, переменную changeTimer в которой будет храниться цикл setInterval, функцию getNewTimer которая генерирует новый setInterval и два события для наведение на slider и от него. Если мы наводим на слайдер то автопрокрутка должна остановиться и событие удаляет цикл setInterval, если же мы уберем курсор с элемента автопрокрутка восстанавливается и мы генерируем новый цикл в переменную changeTimer.

Иногда требуется реализовать простой слайдер на чистом javascript без использования сторонних библиотек, таких как jquery. В этом посте мы как раз сделаем такой слайдер.

Процесс слайдера

Шаг 1. Разметка HTML

Шаг 2. Стили CSS

Шаг 3. JavaScript

Рабочий код слайдера также можно скачать по ссылке

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

Простой, легкий (21Кб в сжатом виде) слайдер, написанный на чистом Javascript, не имеющий никаких зависимостей, т.е. работает без jQuery.

Протестирован в следующих браузерах:

  • Chrome 26.0
  • Firefox 20.0
  • Safari 5.1.7
  • IE 10
  • Opera 16.0
Читайте также  Свет с помощью магнита

Есть неполная поддержа IE8/9 (нет эффектов).

Ссылка на основную публикацию
Adblock detector