Простой слайдер без jQuery на чистом JavaScript

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

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

Подключение файлов

Для начала, если Вы еще не подключили Cool-библиотеку, её нужно подключить перед закрывающим тегом head (если вы не изменяли стандартный шаблон CoolCMS - у Вас уже подключены все необходимые файлы): [code] [/code] Так же необходимо подключить JavaScript, желательно разместить его в самом низу сайта, перед закрывающим тегом body: [code][/code]

Разметка слайдера

После того как все файлы подключены, необходимо создать простую разметку: [code][div+] class="slider"> [div+] class="slide">Слайд 1[/div] [div+] class="slide">Слайд 2[/div] [div+] class="slide">Слайд 3[/div] [/div][/code]

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

После того как разметка Вашего слайдера готова, необходимо его инициализировать. Создайте и подключите JavaScript файл и пропишите в него следующий код: [code]let slider = sl('.slider'); slider.init({ autoplay: false, delay: 5000, dots: false, currentSlide: 2 }); });[/code] Расскажу немного подробнее что происходит в функции init: [code]autoplay - автостарт слайдера (по умолчанию true), delay - задержка слайда (по умолчанию 2 секунды), dots - показ крошек (по умолчанию true), currentSlide - номер слайда с которого начинается пролистывание (по умолчанию 0), before - функция, вызывающаяся перед пролистыванием слайда (по умолчанию null), callback - функция, вызывающаяся после пролистывания слайда (по умолчанию null)[/code]

Элементы управления слайдером

Бывают случаи когда необходимо переключаться между слайдами, на этот случай я так же все продумал. Необходимо добавить кнопки в слайдер: [code][div+] class="wrapper"> [div+] class="slider"> [div+] class="slide">Слайд 1[/div] [div+] class="slide">Слайд 2[/div] [div+] class="slide">Слайд 3[/div] [/div] [div+] class="prev">Предыдущий[/div] [div+] class="next">Следующий[/div] [div+] class="start">Старт[/div] [div+] class="stop">Стоп[/div] [/div][/code] В созданный ранее JavaScript файл пропишите следующий код: [code]$('.stop').addClass('active'); $('.prev').on('click',function(){ slider.prev(); }); $('.next').on('click',function(){ slider.next(); }); $('.start').on('click',function(){ $('.stop').removeClass('active'); $(this).addClass('active'); slider.start(); }); $('.stop').on('click',function(){ $('.start').removeClass('active'); $(this).addClass('active'); slider.stop(); }); $('.slider_dot').on('click',function(){ slider.go(+this.dataset.slide); });[/code]

Что делать если требуется запустить несколько слайдеров?

Все просто! Указывайте разные классы для слайдеров и инициализируйте, все настройки для каждого слайдера никак не влияют на другие слайдеры.

В заключении

На этом собственно все! Ваш слайдер на чистом JavaScript готов.



Подписывайтесь на обновления и будьте вкурсе всех новинок, а так же делитесь с друзьями в социальных сетях!
18 Мая 2018

Комментарии

Комментирование доступно только для авторизированных пользователей

Комментариев пока нет

^ вверх ^