Теперь нужно написать логику чтобы слайдер менял активный слайд в зависимости от нажатия на левую или правую кнопку.
По сути слайдер готов:
Можно дополнить кнопками навигации. Для этого немного поправим верстку и стили. В блок "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 (нет эффектов).
Загрузка...
