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

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

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

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

Для начала, если Вы еще не подключили Cool-библиотеку, её нужно подключить перед закрывающим тегом head (если вы не изменяли стандартный шаблон CoolCMS - у Вас уже подключены все необходимые файлы):
  1. <link rel="stylesheet" href="//cdn.coolcms.ru/css/cool-2.4.min.css">
  2. <link rel="stylesheet" href="//cdn.coolcms.ru/css/cool_slider-1.3.min.css">
Так же необходимо подключить JavaScript, желательно разместить его в самом низу сайта, перед закрывающим тегом body:
  1. <script src="//cdn.coolcms.ru/js/jcool-2.6.min.js"></script>

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

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

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

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

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

Бывают случаи когда необходимо переключаться между слайдами, на этот случай я так же все продумал. Необходимо добавить кнопки в слайдер:
  1. <div class="wrapper">
  2. <div class="slider">
  3. <div class="slide">Слайд 1</div>
  4. <div class="slide">Слайд 2</div>
  5. <div class="slide">Слайд 3</div>
  6. </div>
  7. <div class="prev">Предыдущий</div>
  8. <div class="next">Следующий</div>
  9. <div class="start">Старт</div>
  10. <div class="stop">Стоп</div>
  11. </div>
В созданный ранее JavaScript файл пропишите следующий код:
  1. $('.stop').addClass('active');
  2. $('.prev').on('click',function(){
  3. slider.prev();
  4. });
  5. $('.next').on('click',function(){
  6. slider.next();
  7. });
  8. $('.start').on('click',function(){
  9. $('.stop').removeClass('active');
  10. $(this).addClass('active');
  11. slider.start();
  12. });
  13. $('.stop').on('click',function(){
  14. $('.start').removeClass('active');
  15. $(this).addClass('active');
  16. slider.stop();
  17. });
  18. $('.slider_dot').on('click',function(){
  19. slider.go(+this.dataset.slide);
  20. });

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

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

В заключении

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



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

Я полностью и с интересом прочитал статью и она мне нравится 0
18 Мая 2018

Комментарии

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

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