Пишем свой плагин на чистом JavaScript. Создание слайдера фотографий.

Всем привет. Сегодня я хочу продолжить тему создания карусели на нативном JavaScript. В предыдущей статье мы уже создали простую карусель которую вы можете использовать на вашем сайте. Давайте чуть усложним нашу карусель и сделаем из нее полноценны плагин. Для понимания данного урока вам потребуется базовое знание ООП и контекста вызова в JS.

Готовим верстку

Что бы не писать все с нуля вы можете скачать начальную заготовку тут. Единственно что нам понадобится немного поменять наш шаблон для большей универсальности (в предыдущем примере мы привязали нашу карусель к id что не удобно).

Что у нас должно получится в итоге:


	
	<div class="gallery gallery-1">
       <div class="photo">
         <img src="img/1.jpg" class="shown"></img>
         <img src="img/2.jpg"></img>
       </div>
       <div class="tabs">
            <input type="button" class="prev" value="Назад">
            <input type="button" class="next" value="Вперед">
       </div>
   </div>

Пишем ТЗ

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

Пример инициализации плагина:


new Slider({
		images: '.gallery-1 .photo img',
		next: '.gallery-1 .tabs .next',
		prev: '.gallery-1 .tabs .prev',
		interval: '2000'
	});

Пишем наш плагин


function Slider(images){

		this.images = document.querySelectorAll(images.images);
		this.btPrev = document.querySelector(images.prev);
		this.btNext = document.querySelector(images.next);
		this.interval = images.interval;

		var i = 0;

		this.prev = function() {
	 		this.images[i].className = "";
			 i--;
			 if( i < 0){ 
				i = this.images.length - 1; 
			 } 
			 this.images[i].className = "shown"; 
		 }, 
		 
		 this.next = function() { 
		 	this.images[i].className = ""; 
			i++; if( i >= this.images.length){
			  i = 0;
			}
	    	this.images[i].className = "shown";
		}

		this.btPrev.addEventListener('click', this.prev.bind(this));
		this.btNext.addEventListener('click', this.next.bind(this));

		setInterval(this.next.bind(this), this.interval);

	 }

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

Что такое вообще планиг написанный на JS? Это в первую очередь конструктор (функция) которая в JS называют классом (хотя он не является классом в классическом понимание этого слова). Получается что начиная писать плагин нам нужно создать новый класс. Для этого мы пишем


function Slider(images){
}

Где images это параметр через который мы будем предавать объект с рядом нужных нам свойств. После того как мы получим в классе наш объект то нам нужно инициализировать в свойствах класса кнопки (btPrev, btNext), массив картинок (images) и интервал (interval).


this.images = document.querySelectorAll(images.images);
		this.btPrev = document.querySelector(images.prev);
		this.btNext = document.querySelector(images.next);
		this.interval = images.interval;

Далее нужно добавить переменную var i = 0 т.к. она нам нужна для работы с каждым элементом массива. После чего мы напишем два метода с помощью которых мы будем двигать нашь слайдер по слайдам.


		this.prev = function() {
	 		this.images[i].className = "";
			 i--;
			 if( i < 0){ 
				i = this.images.length - 1; 
			 } 
			 this.images[i].className = "shown"; 
		 }, 
		 
		 this.next = function() { 
		 	this.images[i].className = ""; 
			i++; 
			if( i >= this.images.length){
			  i = 0;
			}
	    	this.images[i].className = "shown";
		}

Разберем по шагам только метод next т.к. по своей логике он аналогичен prev. Метод next должен перебирать нашь массив с картинками, удоляя у предыдущего слайда класс и добовля у следубшего слайда класс shown что бы сам слайд мог появиться.
Т.к. var i = 0 что значит мы будем начинать перебирать нашь массив с первого элемента.
this.images[i].className = «»; ( мы у пергово элемента массива this.images[0] удаляем класс с помошью lassName = «» присваения )
i++; тут мы добовляем еденичку к нашему индификатору и получаем следующий слайд (this.images[1]) на который мы навешиваем класс shown
this.images[i].className = «shown»;
Остается только одна проблема. Когда нашь массив дойдет до конца то скрипт перестанит выполняться. Нам нужно напись условия возващения к первому элементу ели мы находимя на последнем элементе нашего массива.
Для этого и пишем условие
if( i >= this.images.length){
i = 0;
}
Если у нас номер элемента массива больше длины массива то номер индекса элемента массива станет равен 0 и тогда мы ввернемя в самый конец нашего массива.
Последние штрихи.
Мы уже инициалзировали все нужные нам элементы и написали два метода которые будут листать нашь слайд. Осталось навесть эти методы на событи. Для это нашишим следующие инструкции.


		this.btPrev.addEventListener('click', this.prev.bind(this));
		this.btNext.addEventListener('click', this.next.bind(this));

		setInterval(this.next.bind(this), this.interval);

На кнопку btPrev мы навешиваем событие click которое будет вызывать мето prev. Важный момент! Если мы вызываем в функции класса метод, то у нас теряется контекст вызова и this начинает смотреть на объкт window. А нам нужен контекст который будет указывать на сам класс. Для этого мы воспользуемся стандартным методом в ES5 и напишем bind(this) который добавит нам нужный контекстк.
Что бы реализовать автоматический таймер для прокручивания нашего слайдера мы добавим функцию setInterval и передадим в нее два аргумента this.next которую нам нужно будет ‘биндить’ для использования в контексте данного класса и this.interval наши параметр в миллисекундах который мы передаем при инициализации плагина.

Заключение

Вот и все друзья! Могу вас поздравить. Сегодня вы написали свой собственный плагин карусель на чистом javascript. Этот пример даст вам хорошую основу и понимание того как вообще пишутся плагины. Удачно вам покодить!)