Как написать простой слайдер

В этой статье рассмотрим, как подключить и настроить простой адаптивный слайдер на сайт, написанный на чистом CSS и JavaScript. Посмотрим примеры его использования для ротации различного контента: картинок, отзывов, текстовой информации и товаров.

Демо слайдера SimpleAdaptiveSlider

Демо слайдера SimpleAdaptiveSlider без зацикливания:

Посмотреть

Демо слайдера SimpleAdaptiveSlider с бесконечной прокруткой (с зацикливанием):

Посмотреть

Загрузка и подключение слайдера

SimpleAdaptiveSlider — это простой адаптивный слайдер для сайта, написанный автором этого ресурса на чистом CSS и JavaScript.

Проект слайдера расположен на GitHub. Данный слайдер распространяется под лицензией MIT. Следовательно, его можно использовать бесплатно как в личных, так и в коммерческих проектах. Поблагодарить автора и поддержать дальнейшее развитие этого проекта можно здесь.

SimpleAdaptiveSlider имеет следующие характеристики:

• лёгкий (без jQuery), минимизированный размер JS кода составляет всего 8Кбайт;
• адаптивный, т.е. динамически подстраивающийся под заданные размеры viewport;
• без зацикливания, так и с бесконечной прокруткой;
• с автоматической сменой слайдов через определённые интервалы времени;
• возможность перелистывания слайдов посредством свайпа;
• в контенте слайда можно размещать различную информацию (текстовую, изображения, отзывы, товары и т.д.).

Коды слайдера состоят из CSS и JavaScript файлов:

• simple-adaptive-slider.css и его минимизированная версия simple-adaptive-slider.min.css
• simple-adaptive-slider.js и его минимизированная версия simple-adaptive-slider.min.js;

Скачать файлы SimpleAdaptiveSlider можно по этим ссылкам или посредством загрузки всего проекта ui-components с GitHub.

Для скачивания файлов через ссылки, нужно открыть страницу и выбрать в контекстном меню браузера пункт «Сохранить как»:

В проекте «itchief/ui-components» этот слайдер расположен в папке «simple-adaptive-slider».

Для подключения слайдера к странице необходимо:

1. Подключить CSS и JavaScript файлы к странице:

<!-- Подключаем CSS слайдера -->
<link rel="stylesheet" href="simple-adaptive-slider.css">
<!-- Подключаем JS слайдера -->
<script defer src="simple-adaptive-slider.js"></script>

2. Вставить в необходимое место страницы следующую разметку слайдера (html код):

<!-- Разметка слайдера (html код) -->
<div class="itcss">
  <div class="itcss__wrapper">
    <div class="itcss__items">
      <div class="itcss__item">
        <!-- Контент 1 слайда -->
      </div>
      <div class="itcss__item">
        <!-- Контент 2 слайда -->
      </div>
      <div class="itcss__item">
        <!-- Контент 3 слайда -->
      </div>
      <div class="itcss__item">
        <!-- Контент 4 слайда -->
      </div>
    </div>
  </div>
  <!-- Стрелки для перехода к предыдущему и следующему слайду -->
  <a class="itcss__control itcss__control_prev" href="#" role="button" data-slide="prev"></a>
  <a class="itcss__control itcss__control_next" href="#" role="button" data-slide="next"></a>
</div>

В этой разметке карусель состоит из 4 слайдов. Контент слайдов необходимо помещать в элементы «.itcss__item».

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

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

Инициализация слайдера осуществляется посредством создания нового экземпляра объекта типа ItcSimpleSlider:

document.addEventListener('DOMContentLoaded', () => {
  // инициализация слайдера
  new ItcSimpleSlider('.itcss', {
    loop: true,
    autoplay: false,
    interval: 5000,
    swipe: true,
  });
});

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

Если, например, нужно инициализировать несколько слайдеров на странице, то к каждому можно добавить id, а затем использовать указанный идентификатор для выбора определённого слайдера.

<script>
document.addEventListener('DOMContentLoaded', () => {
  // инициализация 1 слайдера с нужными настройками
  new ItcSimpleSlider('#slider-1', {
    loop: true,
    autoplay: false,
    interval: 5000,
    swipe: true,
  });
  // инициализация 2 слайдера с нужными настройками
  new ItcSimpleSlider('#slider-2', {
    loop: true,
    autoplay: false,
    interval: 5000,
    swipe: true,
  });
});
</script>

<!-- 1 слайдер -->
<div class="itcss" id="slider-1">...</div>
<!-- 2 слайдер -->
<div class="itcss" id="slider-2">...</div>

Настройка слайдера осуществляется с помощью 2 аргумента. Его нужно передавать в формате объекта и он имеет 4 ключа:

• loop — отвечает за зацикленность; по умолчанию этот ключ имеет значение true; если слайдер не должен быть бесконечным, т.е. быть без зацикливания loop необходимо установить значение false;
• autoplay — включает автоматическую смену слайдов; время через которое это необходимо выполнять определяется ключом interval;
• interval — время в миллисекундах через которое нужно автоматически переключать слайды; по умолчанию — 5000, т.е. 5 секунд;
• swipe — определяет можно ли слайды менять свайпом; по умолчанию включено.

Значение ключей во 2 аргументе по умолчанию:

new ItcSimpleSlider('.itcss', {
  loop: true,
  autoplay: false,
  interval: 5000,
  swipe: true,
});

Пример инициализация слайдера без зацикливания:

new ItcSimpleSlider('.itcss', {
  loop: false,
});

Пример инициализация слайдера с автоматической сменой слайдов через 10 секунд:

new ItcSimpleSlider('.itcss', {
  autoplay: true,
  interval: 10000,
});

Методы слайдера

Данный слайдер имеет несколько методов, с помощью которых вы можете им управлять:

• next — перейти к следующему слайду;
• prev — перейти к предыдущему слайду;
• autoplay — включение и выключение автоматической смены слайдов;

Чтобы эти методы были доступны нужно при инициализации слайдера сохранить ссылку на созданный экземпляр объекта ItcSimpleSlider в некоторую переменную:

const slider = new ItcSimpleSlider('.itcss', {
  loop: false,
});

Пример использования методов:

slider.next(); // переход к следующему слайду
slider.prev(); // переход к предыдущему слайду
slider.autoplay(); // включить автоматическую смену слайдов
slider.autoplay('stop'); // выключить автоматическую смену слайдов

Пример с использованием методов слайдера

Например, создадим слайдер, в котором будем использовать свои кнопки для перехода к предыдущему и следующему слайду. Исходные кнопки удалим из разметки.

<!-- Разметка слайдера -->
<div class="itcss">
  <div class="itcss__wrapper">
    <div class="itcss__items">...</div>
  </div>
</div>
<!-- Новые кнопки -->
<div class="btn-wrapper">
  <button class="btn btn-prev">PREV</button>
  <button class="btn btn-next">NEXT</button>
</div>

Для отключения индикаторов добавим в CSS:

.itcss__indicators {
  display: none;
}

Напишем, скрипт, который будет при нажатии на кнопки выполнять переход на предыдущий или следующий item:

document.addEventListener('DOMContentLoaded', () => {
  // инициализация слайдера
  const slider = new ItcSimpleSlider('.itcss');
  // назначим обработчик при нажатии на кнопку .btn-prev
  document.querySelector('.btn-prev').onclick = () => {
    // перейдём к предыдущему слайду
    slider.prev();
  }
  // назначим обработчик при нажатии на кнопку .btn-next
  document.querySelector('.btn-next').onclick = () => {
    // перейдём к следующему слайду
    slider.next();
  }
});

Посмотреть

Примеры использования слайдера

1. Использование ItcSimpleSlider для ротации изображений:

Посмотреть

2. Применение слайдера для текстовой информации:

Посмотреть

3. Создание слайдера для отзывов:

Посмотреть

4. Настройка слайдера для ротации товаров:

Посмотреть

5. Слайдер с миниатюрами:

Посмотреть

6. Слайдер, в котором при клике по кнопке расположенной в левом нижнем углу открывается ещё один слайдер в popup:

Посмотреть

Краткое описание исходных кодов и принципа работы

HTML структура слайдера:

<div class="itcss">
  <div class="itcss__wrapper">
    <div class="itcss__items">
      <div class="itcss__item">
        ...
      </div>
      <div class="itcss__item">
        ...
      </div>
      <div class="itcss__item">
        ...
      </div>
      <div class="itcss__item">
        ...
      </div>
    </div>
  </div>
  <a class="itcss__control itcss__control_prev" href="#" role="button"></a>
  <a class="itcss__control itcss__control_next" href="#" role="button"></a>
</div>

В разметке корневой элемент — это тег <div> с классом itcss.

Внутри него находятся:

• .itcss__wrapper — wrapper (обёртка для слайдов);
• 2 элемента .itcss__control — ссылки, оформленные в виде кнопок для перехода соответственно к предыдущему и следующему слайду;
• точки или другими словами индикаторы .itcss__indicators — добавляются динамически посредством JavaScript кода;

Обертка .itcss__wrapper содержит внутри .itcss__items, а он в свою уже очередь непосредственно сами item (слайды). Это элементы — .itcss__item.

Индикаторы (.itcss__indicators) выполнены в виде нумерованного списка. Каждый элемент li внутри него содержит атрибутом data-slide-to. В нём содержится индекс слайда. Он используется в JavaScript коде и определяет слайд на который нужно перейти в случае нажатия на него. Активный индикатор отмечается посредством класса itcss__indicator_active.

Кнопки «назад» и «вперед» размечены с помощью элемента a.

В определённый момент времени в слайдере отображается только один item, который не сдвинут относительно .itcss__wrapper. Все другие слайды сдвинуты. Скрытие слайдов выходящих за пределы .itcss__wrapper осуществляется с помощью свойства overflow: hidden.

.itcss__wrapper {
  overflow: hidden;
}

Перемещение item выполняется с помощью CSS трансформации. Для этого к .itcss__items и .itcss__item в нужные моменты времени добавляется CSS-свойство transform: translateX(...) с нужным значением.

Например, когда к .itcss__items добавляется transform: translateX(...) со значением -100%, то браузер осуществляет переход к следующему слайду, а если наоборот, 100% — то к предыдущему.

Анимация переход осуществляется помощью CSS свойства transition:

.itcss__items {
  transition: transform 0.5s ease;
}

Скрипт слайдера написан на «чистом» JavaScript без использования jQuery и других каких-либо библиотек.

Он имеет следующую укрупнённую структуру:

class ItcSimpleSlider {
  // конструктор
  constructor(target, config) {
    // ...
  }
  // добавляет класс к активным элементам и управляет видимостью кнопок управления
  _setActiveClass() {
    // ...
  }
  // выполняет смену слайдов
  _move(useTransition) {
    // ...
  }
  // функция для перемещения к слайду по индексу
  _moveTo(index, useTransition) {
    // ...
  }
  // метод для автоматической смены слайдов
  _autoplay = function (action) {
    // ...
  }
  // добавляет в разметку индикаторы
  _addIndicators() {
    // ...
  }
  // refresh extreme values (обновляет значения переменных, содержащих экстремальные значения слайдов)
  _refreshExtremeValues() {
    // ...
  }
  // balancing items (уравновешивает слайды (для зацикленности)
  _balancingItems() {
    // ...
  };
  // adding listeners (назначаем обработчики для событий)
  _addEventListener() {
    // ...
  }
  // перейти к следующему слайду
  next() {
    // ...
  }
  // перейти к предыдущему слайду
  prev() {
    // ...
  }
  // управление автоматической сменой слайдов
  autoplay(action) {
    // ...
  }
  moveTo(index, useTransition) {
    // ...
  }
}

Время на прочтение
7 мин

Количество просмотров 132K

Автор уже опубликовал скрипт карусели, который также использует только CSS и Javascript. Теперь давайте рассмотрим скрипт слайдера. Он отличается от карусели тем, что одновременно виден только один элемент, а не несколько, и элементы не прокручиваются, а медленно замещаются одно другим. И ещё. В данном слайдере в качестве элементов используются только изображения (слайды), поэтому и называется он простой слайдер изображений.

Навигация осуществляется стрелками “Следующий элемент” или “Предыдущий элемент” и индикаторными точками. Стрелки и точки можно отключить в настройках скрипта. Элементы могут быть показаны с остановкой на первом и последнем элементе или в цикле, когда за последним элементом вновь следует первый. Можно включить автоматический просмотр (пролистывание) элементов, длительность просмотра (интервал между переключениями) регулируется. При наведении мыши на элемент пролистывание прекращается.

Слайдер автоматически подстраивается под любую ширину экрана любого устройства. Убедиться в этом можно сдвигая влево-вправо какую-либо из боковых сторон браузера.

HTML – код слайдера стандартный, за исключением одного: перед изображениями помещён экран, который представляет собой однотонный рисунок белого цвета. Все изображения и экран должны быть одного размера. Число изображений произвольное.

<div class="sim-slider">
     <ul class="sim-slider-list">
         <li><img src="screen.gif" alt="screen"></li>    <!-- это экран -->
         <li class="sim-slider-element"><img src="img1.jpg" alt="1"></li>
         <li class="sim-slider-element"><img src="img2.jpg" alt="2"></li>
	  …
         <li class="sim-slider-element"><img src="imgN.jpg" alt="N"></li>
     </ul>
     <div class="sim-slider-arrow-left"></div>
     <div class="sim-slider-arrow-right"></div>
     <div class="sim-slider-dots"></div>
 </div>

В качестве контейнеров использованы теги <ul><li>, но можно использовать и <div><div> или <div><p>. Стрелки и индикаторные точки располагаются абсолютным позиционированием в соответствующих контейнерах. Для стрелок используются рисунки в виде треугольных скобок, которые, при желании, вы можете заменить своими рисунками. Точки генерируются программой, количество точек равно количеству изображений.

Все изображения располагаются “в стопочку”, одно над другим абсолютным позиционированием в левом верхнем углу объемлющего контейнера. Экран предотвращает схлопывание внешнего контейнера. Всем изображениям присваивается CSS-свойство opacity: 0, кроме первого элемента, которому программа инициализации присваивает opacity: 1, тем самым делая его видимым.

Пролистывание элементов осуществляется плавным изменением opacity из 1 в 0 для видимого элемента и из 0 в 1 для следующего за ним невидимого элемента. Тем самым видимый элемент становится невидимым, а невидимый видимым. Плавность перехода создаёт свойство transition с длительностью 1с и функцией перехода ease-in.

img {
  width: 100%;  !important;
}

/* General styles */
.sim-slider {
  position: relative;
}

.sim-slider-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: relative;
}

.sim-slider-element {
  width: 100%;
  transition: opacity 1s ease-in;
  opacity: 0;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  display: block;
}

/* Navigation item styles */
div.sim-slider-arrow-left,
div.sim-slider-arrow-right {
  width: 22px;
  height: 40px;
  position: absolute;
  cursor: pointer;
  opacity: 0.6;
  z-index: 4;
}

div.sim-slider-arrow-left {
  left: 10px;
  top: 40%;
  display: block;
  background: url("sim-arrow-left.png") no-repeat;
}

div.sim-slider-arrow-right {
  right: 10px;
  top: 40%;
  display: block;
  background: url("sim-arrow-right.png") no-repeat;
}

div.sim-slider-arrow-left:hover {
  opacity: 1.0;
}

div.sim-slider-arrow-right:hover {
  opacity: 1.0;
}

div.sim-slider-dots {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  text-align: center;
}

span.sim-dot {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  padding: 0;
  display: inline-block;
  background-color: #BBB;
  border-radius: 5px;
  cursor: pointer;
}

Для того, чтобы слайдер был адаптивным к любой ширине экрана, для изображений нужно указать CSS-свойство width: 100%. Для всех блочных контейнеров (div, ul, li и пр.) также width: 100% или, если нужна ширина в числовых единицах, то только max-width или min-width.

Стили, как обычно, подключаются в заголовке. Скрипт можно подключить по наступлению события onload или в конце HTML-разметки. Файл со скриптом слайдера может выглядеть так:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0">
	<title>Simple slider</title>
	<!-- подключение стилей -->
	<link rel="stylesheet" type="text/css" href="sim-slider-styles.css">
</head>
<body>
	…
	<div class="sim-slider">
		<!-- здесь ваш слайдер -->
		…
	</div>
	…
	<footer>
	…
	</footer>
<!-- подключение слайдера -->
<script src="sim-slider.js"></script>
<!-- вызов слайдера -->
<script>new Sim()</script>
</body>
</html>

Вызов слайдера производится по имени класса sim-slider или по идентификатору. Во втором случае можно разместить несколько слайдеров на одной странице.

<div class="sim-slider" id="first">
	<!-- первый слайдер -->
	…
<div class="sim-slider" id="second">
	<!-- второй слайдер -->
	…
<script>new Sim("first"); new Sim("second");</script>

function Sim(sldrId) {

	let id = document.getElementById(sldrId);
	if(id) {
		this.sldrRoot = id
	}
	else {
		this.sldrRoot = document.querySelector('.sim-slider')
	};

	// Slider objects
	this.sldrList = this.sldrRoot.querySelector('.sim-slider-list');
	this.sldrElements = this.sldrList.querySelectorAll('.sim-slider-element');
	this.sldrElemFirst = this.sldrList.querySelector('.sim-slider-element');
	this.leftArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-left');
	this.rightArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-right');
	this.indicatorDots = this.sldrRoot.querySelector('div.sim-slider-dots');

	// Initialization
	this.options = Sim.defaults;
	Sim.initialize(this)
};

Sim.defaults = {

	// Default options for the slider
	loop: true,     // Бесконечное зацикливание слайдера
	auto: true,     // Автоматическое пролистывание
	interval: 5000, // Интервал между пролистыванием элементов (мс)
	arrows: true,   // Пролистывание стрелками
	dots: true      // Индикаторные точки
};

Sim.prototype.elemPrev = function(num) {
	num = num || 1;

	let prevElement = this.currentElement;
	this.currentElement -= num;
	if(this.currentElement < 0) this.currentElement = this.elemCount-1;

	if(!this.options.loop) {
		if(this.currentElement == 0) {
			this.leftArrow.style.display = 'none'
		};
		this.rightArrow.style.display = 'block'
	};
	
	this.sldrElements[this.currentElement].style.opacity = '1';
	this.sldrElements[prevElement].style.opacity = '0';

	if(this.options.dots) {
		this.dotOn(prevElement); this.dotOff(this.currentElement)
	}
};

Sim.prototype.elemNext = function(num) {
	num = num || 1;
	
	let prevElement = this.currentElement;
	this.currentElement += num;
	if(this.currentElement >= this.elemCount) this.currentElement = 0;

	if(!this.options.loop) {
		if(this.currentElement == this.elemCount-1) {
			this.rightArrow.style.display = 'none'
		};
		this.leftArrow.style.display = 'block'
	};

	this.sldrElements[this.currentElement].style.opacity = '1';
	this.sldrElements[prevElement].style.opacity = '0';

	if(this.options.dots) {
		this.dotOn(prevElement); this.dotOff(this.currentElement)
	}
};

Sim.prototype.dotOn = function(num) {
	this.indicatorDotsAll[num].style.cssText =
             'background-color:#BBB; cursor:pointer;'
};

Sim.prototype.dotOff = function(num) {
	this.indicatorDotsAll[num].style.cssText =
             'background-color:#556; cursor:default;'
};

Sim.initialize = function(that) {

	// Constants
	that.elemCount = that.sldrElements.length; // Количество элементов

	// Variables
	that.currentElement = 0;
	let bgTime = getTime();

	// Functions
	function getTime() {
		return new Date().getTime();
	};
	function setAutoScroll() {
		that.autoScroll = setInterval(function() {
			let fnTime = getTime();
			if(fnTime - bgTime + 10 > that.options.interval) {
				bgTime = fnTime; that.elemNext()
			}
		}, that.options.interval)
	};

	// Start initialization
	if(that.elemCount <= 1) {   // Отключить навигацию
		that.options.auto = false;
                that.options.arrows = false; that.options.dots = false;
		that.leftArrow.style.display = 'none';
                that.rightArrow.style.display = 'none'
	};
	if(that.elemCount >= 1) {   // показать первый элемент
		that.sldrElemFirst.style.opacity = '1';
	};

	if(!that.options.loop) {
		that.leftArrow.style.display = 'none';  // отключить левую стрелку
		that.options.auto = false; // отключить автопркрутку
	}
	else if(that.options.auto) {   // инициализация автопрокруки
		setAutoScroll();
		// Остановка прокрутки при наведении мыши на элемент
		that.sldrList.addEventListener('mouseenter', function() {
                      clearInterval(that.autoScroll)
                }, false);
		that.sldrList.addEventListener('mouseleave', setAutoScroll, false)
	};

	if(that.options.arrows) {  // инициализация стрелок
		that.leftArrow.addEventListener('click', function() {
			let fnTime = getTime();
			if(fnTime - bgTime > 1000) {
				bgTime = fnTime; that.elemPrev()
			}
		}, false);
		that.rightArrow.addEventListener('click', function() {
			let fnTime = getTime();
			if(fnTime - bgTime > 1000) {
				bgTime = fnTime; that.elemNext()
			}
		}, false)
	}
	else {
		that.leftArrow.style.display = 'none';
                that.rightArrow.style.display = 'none'
	};

	if(that.options.dots) {  // инициализация индикаторных точек
		let sum = '', diffNum;
		for(let i=0; i<that.elemCount; i++) {
			sum += '<span class="sim-dot"></span>'
		};
		that.indicatorDots.innerHTML = sum;
		that.indicatorDotsAll =
                       that.sldrRoot.querySelectorAll('span.sim-dot');
		// Назначаем точкам обработчик события 'click'
		for(let n=0; n<that.elemCount; n++) {
			that.indicatorDotsAll[n].addEventListener('click', function(){
				diffNum = Math.abs(n - that.currentElement);
				if(n < that.currentElement) {
					bgTime = getTime(); that.elemPrev(diffNum)
				}
				else if(n > that.currentElement) {
					bgTime = getTime(); that.elemNext(diffNum)
				}
				// Если n == that.currentElement ничего не делаем
			}, false)
		};
		that.dotOff(0);  // точка[0] выключена, остальные включены
		for(let i=1; i<that.elemCount; i++) {
			that.dotOn(i)
		}
	}
};

Все изображения взяты из открытых источников

Спасибо за внимание!

От автора: при изучении JS люди очень часто ищут статьи о том, как создать слайд шоу, карусель изображений, слайдер или ротатор. В этом уроке мы: создадим простенькое слайд шоу без внешних библиотек типа JQuery; разберем проблемы UX и доступности, а также моменты, когда стоит использовать слайд шоу, а когда нет; добавим элементы управления.

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

Наш урок предполагает базовые знания языка JavaScript: функции, событие клика и изменение стилей. Я написал руководство о том, что и в какой последовательности стоит изучать в JavaScript, чтобы быстро начать применять полученные знания на практике.

Создаем простое слайд шоу

Нам понадобится контейнер для слайдов и сами слайды. Вот так это будет выглядеть:

Базовые стили должны:

Прежде чем смотреть в CSS не забудьте сменить классы и идентификаторы, чтобы не было конфликтов с вашими сайтами. В нашей статье имена классов и идентификаторов будут короткими. Вот наш CSS:

Теперь можно добавить стили внешнего вида слайд шоу. Для нашего демо я использовал следующие стили:

JavaScript

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

Разберемся, что здесь происходит:

Подробнее разберем функцию nextSlide:

Вот и все, мы создали самое простое слайд шоу. По поводу совместимости: Свойство transition не поддерживается в IE9 и ниже, в таком случае эффект затухания сменится на обычный резкий переход к следующему слайду. Базовое слайд шоу:

UX и доступность

Прежде чем использовать слайд шоу определитесь с его ролью на странице. Давайте разберем, как слайд шоу может убить весь пользовательский опыт и доступность на сайте, если неправильно его использовать.

Слайд шоу может скрывать критический контент

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

По исследованию Университета Нотр-Дам только 1.07% людей кликают на контент в слайд шоу, а из этой маленькой доли людей только 3% кликают на другие слайды помимо первого. Данный пример показывает опасность при расположении критического контента в слайд шоу.

Пользователь может неправильно понять основную задачу сайта

Эта проблема особо остро стоит на сайтах с большими слайд шоу на домашних страницах. Если вы не можете точно определиться, что показывать пользователям, как они поймут, что нужно делать на вашем сайте?

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

Фирма по оптимизации конверсии WiderFunnel провела исследования эффективности слайд шоу и пришла к следующему выводу: «Мы протестировали ротаторы специальных предложений и выяснили, что они плохо представляют контент на домашней странице.»

Слайд шоу может разозлить мобильных пользователей

Слайд шоу может увеличить время загрузки и потребление данных на мобильных устройствах. Помимо всего прочего управление такими ротаторами на мобильных экранах может быть крайне неудобно.

Когда применять слайд шоу

Если учесть все потенциальные проблемы, то когда же все-таки нужно использовать слайд шоу? Вот несколько советов.

Создание общего впечатления

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

Когда к контенту легко получить доступ из другого места

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

При использовании техники прогрессивного улучшения

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

Советы по доступности

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

Из статьи: «Для создания доступного слайдера необходимо соблюсти 5 условий:

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

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

Пора добавить кнопку паузы, следующий слайд и предыдущий слайд. Кнопка паузы. Сперва, добавьте кнопку в HTML:

Потом добавьте этот код JS:

Что происходит в скрипте:

Вот так работает наш слайдер с кнопкой паузы:

Кнопки следующий и предыдущий

Сначала добавьте кнопки Next и Previous в HTML:

В JavaScript измените функцию:

…на:

Для большей гибкости в скрипте выше мы добавили общую функцию goToSlide. Также чтобы не получить отрицательное значение, мы слегка изменили способ вычисления переменной currentSlide. Для теста вы можете заменить slides.length на свое число и посмотреть, что попадет в currentSlide с изменением значения n. Добавьте код ниже в скрипт, чтобы кнопки начали работать:

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

Обратите внимание, чтобы автопроигрывание не помешало переключению между слайдами, мы ставим его на паузу, когда пользователь кликает на кнопки Next и Previous. Кнопки управления доступны на клавиатуре автоматически, так как это обычные HTML теги.

Можете изменять стили и перемещать кнопки в любое место, главное, чтобы они были хорошо видны и работали. Если вы хотите добавить переключение по слайдеру с помощью стрелок на клавиатуре, то отключайте эту функцию, если пользователь использует стрелки явно не на слайдере – к примеру, в текстовом поле.

Фолбэк на случай если JavaScript недоступен

Бывают случаи, когда JavaScript не смог загрузиться, отключен, не поддерживается устройством и т.д. В идеале пользователь даже в таких случаях получит что-то работающее. Какой фолбэк вы создадите зависит от вас. Можно показывать только первое изображение или же все списком.

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

Прячем кнопки если JavaScript недоступен

Прячьте кнопки с помощью CSS по умолчанию.

Затем показывайте их с помощью JS. Так пользователь увидит кнопки только, если JS активен.

Код выше пробегается в цикле по кнопкам и показывает их.

Показывайте изображения списком когда JavaScript недоступен

Сперва, поменяйте в классе .slide position: absolute; на position: static;. Так слайды будут показываться списком по умолчанию.

Затем добавьте JS код и пробегайтесь в цикле по слайдам и меняйте их позиционирование на абсолютное (этот код обязательно должен быть после определения переменной slides):

В таком случае слайды не будут отображаться списком, если доступен JS.

Заключение

Мы разобрали, как создать простой слайдер, как решить некоторые UX проблемы и проблемы доступности, а также как создать кнопки управления.

Вывод из статьи: прежде чем вставлять что-либо на страницу, подумайте о том, как это повлияет на пользовательский опыт, а также поможет ли это достичь основной задачи сайта. Если вы не можете дать четкого ответа, может быть, не стоит добавлять слайдер на страницу.

А вы что думаете? Есть у вас какие-нибудь хорошие истории о слайдерах? Или плохие? Забавные? Пишите об этом в комментариях.

Автор: Gabrielle Gosha

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

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

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

 

Слайдер для сайта — это норма

Слайдер как элемент веб—страницы приобрел свою популярность во времена распространения фреймворков JavaScript, когда появилась возможность его простой реализации. Поэтому встретить слайдер на просторах интернета можно очень часто, так как нет ничего сложного в том, чтобы добавить слайдер на свой сайт.

Слайдер бывает очень разным. Например, самая простая его реализация — это обычный последовательный просмотр элементов самого слайдера. В более сложных реализациях могут добавляться:

• ручное и автоматическое перелистывание;

• возможность перейти по ссылке, нажав на сам слайдер;

• наличие кнопок с призывом действия;

• анимационные эффекты при смене слайдов;

• и мн. др.

Раньше слайдер реализовывался по простому принципу:

• за место, где вывести слайдер, отвечал HTML;

• за то, как визуально выглядит слайдер, отвечал CSS;

• за анимационные сценарии и дополнительные функции отвечал JavaScript.

Сейчас по такому принципу можно также разработать слайдер. Однако современные возможности CSS позволяют при разработке слайдера не использовать JavaScript. Многие современные разработчики как раз склоняются к реализации слайдера при помощи только HTML и CSS. У такого подхода есть одно явное преимущество — скорость работы такого слайдера выше за счет того, что вся обработка кода слайдера происходит в движке браузера и она никак не зависит от каких-либо дополнительных процессов.

 

Как реализовать слайдер для своего сайта

Слайдер можно добавить на сайт двумя путями:

• воспользоваться готовым решением, если это позволяет сделать ваш сайт;

• сделать слайдер на сайте самостоятельно, например, применяя HTML и CSS.

 

Готовое решение слайдера для сайта

Готовый слайдер для сайта — это идеальный вариант, когда ваш сайт работает на популярных CMS, например, WordPress, Joomla и др. Многие подобные CMS имеют готовые решения для слайдера в виде специальных плагинов. Все, что нужно сделать, — это:

• установить соответствующий плагин из официального репозитория вашей CMS;

• активировать плагин;

• настроить слайдер в админке вашего сайта, добавив в него контент для вывода;

• вывести слайдер в нужном месте при помощи шорткода, кода HTML или функции.

 

Как сделать слайдер на своем сайте HTML при помощи CSS

Бывает же такое, что сайт не использует CMS. В этом случае нужно будет самостоятельно разработать свой слайдер. Как правило, такая разработка слайдера должна быть осуществлена при помощи той же технологии, на которой разработан ваш сайт. Практически любой современный язык программирования или какой-либо фреймворк имеют в своем арсенале инструменты для разработки слайдера. Все инструменты и подходы, как можно реализовать слайдер для сайта, не перечислить. Но мы можем рассмотреть самую простую ситуацию, как сделать слайдер на своем сайте HTML при помощи CSS.

 

Делаем простой адаптивный слайдер на CSS

Для начала нам нужен будет HTML слайдера. Например, у нас есть:

<body>

<div class=»adaptivSlayder»>

  <input type=»radio» name=»kadoves» id=»slaid1″ checked>

  <input type=»radio» name=»kadoves» id=»slaid2″>

  <input type=»radio» name=»kadoves» id=»slaid3″>

  <div class=»kadoves»>

  <label for=»slaid1″></label>

  <label for=»slaid2″></label>

  <label for=»slaid3″></label>

  </div>

  <div class=»adaptivSlayderlasekun»>

  <div class=»abusteku-deagulus»>

  <img src=»img1.jpg»/>

  <img src=»img2.jpg»/>

  <img src=»img3.jpg»/>

  </div>

  </div>

</div>

</body>

Чтобы все заработало как надо, необходимо добавить следующий CSS:

.adaptivSlayder {

  position: relative;

  max-width: 710px;

  margin: 65px auto;

  box-shadow: 0 9px 18px -4px rgba(0, 0, 0, 0.69);

}

.adaptivSlayder input[name=»kadoves»] {

  display: none;

}

.kadoves {

  position: absolute;

  left: 0;

  bottom: -35px;

  text-align: center;

  width: 100%;

}

.kadoves label {

  display: inline-block;

  width: 7px;

  height: 7px;

  cursor: pointer;

  margin: 0 2px;

  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .7);

  border-radius: 55%;

  border: 4px solid #2f363c;

  background-color: #738290;

}

#slaid1:checked~.kadoves label[for=»slaid1″] {

  background-color: white;

}

#slaid2:checked~.kadoves label[for=»slaid2″] {

  background-color: white;

}

#slaid3:checked~.kadoves label[for=»slaid3″] {

  background-color: white;

}

.adaptivSlayderlasekun {

  overflow: hidden;

}

.abusteku-deagulus {

  display: flex;

  width: 100%;

  transition: all 0.6s;

}

.abusteku-deagulus img {

  width: 100%;

  flex-shrink:0;

}

#slaid1:checked~adaptivSlayderlasekun abusteku-deagulus {

  transform: translate(0);

}

#slaid2:checked~.adaptivSlayderlasekun .abusteku-deagulus {

  transform: translateX(-100%);

}

#slaid3:checked~.adaptivSlayderlasekun .abusteku-deagulus {

  transform: translateX(-200%);

}

В CSS показан общий принцип реализации слайдера. Вы смело можете писать туда свои значения, чтобы слайдер «как родной» вписался в ваш проект.

 

Заключение

Слайдер — это способ задержать внимание посетителя вашего ресурса, поэтому если дизайн вашего сайта позволяет использовать слайдер, то почему бы этим не воспользоваться. Тем более что реализовать слайдер можно на чистом CSS и HTML.

Простой слайдер на чистом css и javascript, не имеет практической ценности, исключительно для практики. Несколько картинок, возможность автопрокрутки, кнопки вперед и назад, индикатор текущего слайда. Для начала подготовим простую страницу, создадим html-разметку и файл стилей — а потом напишем js-класс Slider.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        .container {
            max-width: 900px;
            margin: 0px auto;
        }
    </style>
    <link rel="stylesheet" href="slider.css">
    <script src="slider.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // здесь будем создавать экземпляр js-класса слайдера
        });
    </script>
</head>
<body>
    <div class="container">
        <!-- здесь будет html-разметка слайдера -->
    </div>
</body>
</html>

Создаем html-разметку слайдера

<body>
    <div class="container">
        <div class="carousel">
            <div class="carousel-window">
                <div class="carousel-slides">
                    <div class="carousel-item">
                        <img src="img/slide-1.jpg" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="img/slide-2.jpg" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="img/slide-3.jpg" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="img/slide-4.jpg" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="img/slide-5.jpg" alt="">
                    </div>
                </div>
            </div>
            <a href="#" class="carousel-prev">
                <span class="carousel-prev-icon">&lt;</span>
            </a>
            <a href="#" class="carousel-next">
                <span class="carousel-next-icon">&gt;</span>
            </a>
        </div>
    </div>
</body>

Создаем файл стилей слайдера

.carousel {
    margin: 0 auto;
    position: relative;
}
    .carousel .carousel-indicators {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 15;
        display: flex;
        justify-content: center;
        padding: 10px;
        list-style: none;
    }
        .carousel .carousel-indicators li {
            flex: 0 1 auto;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            margin-left: 5px;
            cursor: pointer;
            background-color: #343a40;
            border: 2px solid #fff;
            border-radius: 50%;
        }
        .carousel .carousel-indicators .active {
            background-color: #025fff;
        }
    .carousel .carousel-window {
        width: 100%;
        height: 500px;
        position: relative;
        overflow: hidden;
    }
    .carousel .carousel-slides {
        height: 100%;
        display: flex;
        transition: transform 0.5s;
    }
    .carousel .carousel-item {
        height: 100%;
    }
        .carousel .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    .carousel .carousel-prev, .carousel .carousel-next {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15%;
        color: #fff;
        opacity: 0.7;
        text-align: center;
        font-size: 40px;
        text-decoration: none;
    }
    .carousel .carousel-prev:hover, .carousel .carousel-next:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.2);
    }
    .carousel .carousel-prev {
        left: 0;
    }
    .carousel .carousel-next {
        right: 0;
    }

Создаем js-класс слайдера

/*
 * <div class="carousel"> width: 100% (от контейнера .container 900px)
 *     <div class="carousel-window"> width: 100% (от родителя 900px); height: 500px
 *         <div class="carousel-slides"> display: flex, style.width = 300% (2700px)
 *             <div class="carousel-item">...</div> style.width = 33.33333% (900px)
 *             <div class="carousel-item">...</div> style.width = 33.33333% (900px)
 *             <div class="carousel-item">...</div> style.width = 33.33333% (900px)
 *         </div>
 *     </div>
 * </div>
 * Можно сказать, что carousel-window представляет собой окно просмотра 900x500px,
 * в этом окне просмотра виден одновременно только один кадр (слайд). Элемент
 * carousel-slides представляет из себя цепочку из трех кадров (как в кино). Эти
 * кадры выстроены по горизонтали благодаря display:flex. При клике на кнопки
 * next и prev — цепочка смещается влево, и в окне просмотра появляется очередной
 * кадр (слайд).
 */

class Slider {
    constructor(slider, autoplay = true) {
        // элемент div.carousel
        this.slider = slider;
        // все кадры (слайды)
        this.allFrames = slider.querySelectorAll('.carousel-item');
        // цепочка кадров
        this.frameChain = slider.querySelector('.carousel-slides');
        // кнопка «вперед»
        this.nextButton = slider.querySelector('.carousel-next');
        // кнопка «назад»
        this.prevButton = slider.querySelector('.carousel-prev');

        this.index = 0; // индекс кадра, который сейчас в окне просмотра
        this.length = this.allFrames.length; // сколько всего есть кадров
        this.autoplay = autoplay; // включить автоматическую прокрутку?
        this.paused = null; // чтобы можно было выключать автопрокрутку

        this.init(); // инициализация слайдера
    }

    init() {
        this.dotButtons = this.dots(); // создать индикатор текущего кадра

        // все кадры должны быть одной ширины, равной ширине окна просмотра;
        // если кадров три, то ширина каждого кадра будет 100/3 = 33.33333%
        // от ширины контейнера .carousel-slides, то есть 900 пикселей
        this.allFrames.forEach(frame => frame.style.width = 100/this.length + '%');
        // ширина цепочки кадров должна равна ширине всех кадров, то есть
        // 900*3 = 2700 пикселей; но удобнее задать в процентах от родителя,
        // если кадров три, то ширина контейнера кадров будет 100*3 = 300%
        this.frameChain.style.width = 100 * this.length + '%';

        this.nextButton.addEventListener('click', event => { // клик по кнопке «вперед»
            event.preventDefault();
            this.next();
        });

        this.prevButton.addEventListener('click', event => { // клик по кнопке «назад»
            event.preventDefault();
            this.prev();
        });

        // клики по кнопкам индикатора текущего кадра
        this.dotButtons.forEach(dot => {
            dot.addEventListener('click', event => {
                event.preventDefault();
                const index = this.dotButtons.indexOf(event.target);
                if (index === this.index) return;
                this.goto(index);
            });
        });

        if (this.autoplay) { // включить автоматическую прокрутку?
            this.play();
            // когда мышь над слайдером — останавливаем автоматическую прокрутку
            this.slider.addEventListener('mouseenter', () => clearInterval(this.paused));
            // когда мышь покидает пределы слайдера — опять запускаем прокрутку
            this.slider.addEventListener('mouseleave', () => this.play());
        }
    }

    // перейти к кадру с индексом index
    goto(index) {
        // изменить текущий индекс...
        if (index > this.length - 1) {
            this.index = 0;
        } else if (index < 0) {
            this.index = this.length - 1;
        } else {
            this.index = index;
        }
        // ...и выполнить смещение
        this.move();
    }

    // перейти к следующему кадру
    next() {
        this.goto(this.index + 1);
    }

    // перейти к предыдущему кадру
    prev() {
        this.goto(this.index - 1);
    }

    // рассчитать и выполнить смещение
    move() {
        // на сколько нужно сместить, чтобы нужный кадр попал в окно
        const offset = 100/this.length * this.index;
        this.frameChain.style.transform = `translateX(-${offset}%)`;
        this.dotButtons.forEach(dot => dot.classList.remove('active'));
        this.dotButtons[this.index].classList.add('active');
    }

    // запустить автоматическую прокрутку
    play() {
        this.paused = setInterval(() => this.next(), 3000);
    }

    // создать индикатор текущего слайда
    dots() {
        const ol = document.createElement('ol');
        ol.classList.add('carousel-indicators');
        const children = [];
        for (let i = 0; i < this.length; i++) {
            let li = document.createElement('li');
            if (i === 0) li.classList.add('active');
            ol.append(li);
            children.push(li);
        }
        this.slider.prepend(ol);
        return children;
    }
}

Создаем экземпляр js-класса

<link rel="stylesheet" href="slider.css">
<script src="slider.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        new Slider(document.querySelector('.carousel'));
    });
</script>

Еще одни вариант

Еще один вариант слайдера, который допускает показ в каждом кадре нескольких элементов. Кроме того, можно указать, на сколько элементов сдвигать, чтобы показать следующий кадр.

/*
 * <div class="carousel"> width: 100% (от контейнера .container 900px)
 *     <div class="carousel-window"> width: 100% (от родителя 900px); height: 500px
 *         <div class="carousel-slides"> display: flex, style.width = 300% (2700px)
 *             <div class="carousel-item">...</div> style.width = 33.33333% (900px)
 *             <div class="carousel-item">...</div> style.width = 33.33333% (900px)
 *             <div class="carousel-item">...</div> style.width = 33.33333% (900px)
 *         </div>
 *     </div>
 * </div>
 */

class Slider {
    constructor(slider, {autoplay = true, inFrame = 1, offset = 1} = {}) {
        // элемент div.carousel
        this.slider = slider;
        // кол-во элементов в одном кадре
        this.inFrame = inFrame;
        // на сколько элементов смещать
        this.offset = offset;

        // все элементы слайдера
        this.allItems = slider.querySelectorAll('.carousel-item');
        // сколько всего элементов
        this.itemCount = this.allItems.length;

        // все кадры слайдера
        this.allFrames = this.frames();
        // сколько всего кадров
        this.frameCount = this.allFrames.length;
        // индекс кадра в окне просмотра
        this.frameIndex = 0;

        // контейнер для элементов
        this.wrapper = slider.querySelector('.carousel-slides');
        // кнопка «вперед»
        this.nextButton = slider.querySelector('.carousel-next');
        // кнопка «назад»
        this.prevButton = slider.querySelector('.carousel-prev');

        this.autoplay = autoplay; // включить автоматическую прокрутку?
        this.paused = null; // чтобы можно было выключать автопрокрутку

        this.init(); // инициализация слайдера
    }

    init() {
        this.dotButtons = this.dots(); // создать индикатор текущего кадра

        // если всего 10 элементов, то ширина одного элемента составляет 1/10
        // ширины контейнера .carousel-slides, то есть 100/10 = 10%
        this.allItems.forEach(item => item.style.width = 100 / this.itemCount + '%');
        // ширина контейнера должна вмещать все элементы: если элементов 10,
        // в окне просмотра 3 элемента, тогда ширина контейнера равна ширине
        // трех окон просмотра (300%) плюс ширина одного элемента 33.33333%,
        let wrapperWidth = this.itemCount / this.inFrame * 100;
        this.wrapper.style.width = wrapperWidth + '%';

        this.nextButton.addEventListener('click', event => { // клик по кнопке «вперед»
            event.preventDefault();
            this.next();
        });

        this.prevButton.addEventListener('click', event => { // клик по кнопке «назад»
            event.preventDefault();
            this.prev();
        });

        // клики по кнопкам индикатора текущего кадра
        this.dotButtons.forEach(dot => {
            dot.addEventListener('click', event => {
                event.preventDefault();
                const frameIndex = this.dotButtons.indexOf(event.target);
                if (frameIndex === this.frameIndex) return;
                this.goto(frameIndex);
            });
        });

        if (this.autoplay) { // включить автоматическую прокрутку?
            this.play();
            // когда мышь над слайдером — останавливаем автоматическую прокрутку
            this.slider.addEventListener('mouseenter', () => clearInterval(this.paused));
            // когда мышь покидает пределы слайдера — опять запускаем прокрутку
            this.slider.addEventListener('mouseleave', () => this.play());
        }
    }

    // перейти к кадру с индексом index
    goto(index) {
        if (index > this.frameCount - 1) {
            this.frameIndex = 0;
        } else if (index < 0) {
            this.frameIndex = this.frameCount - 1;
        } else {
            this.frameIndex = index;
        }
        // ...и выполнить смещение
        this.move();
    }

    // перейти к следующему кадру
    next() {
        this.goto(this.frameIndex + 1);
    }

    // перейти к предыдущему кадру
    prev() {
        this.goto(this.frameIndex - 1);
    }

    // рассчитать и выполнить смещение
    move() {
        // на сколько нужно сместить, чтобы нужный кадр попал в окно
        const offset = 100 / this.itemCount * this.allFrames[this.frameIndex];
        this.wrapper.style.transform = `translateX(-${offset}%)`;
        this.dotButtons.forEach(dot => dot.classList.remove('active'));
        this.dotButtons[this.frameIndex].classList.add('active');
    }

    // запустить автоматическую прокрутку
    play() {
        this.paused = setInterval(() => this.next(), 3000);
    }

    // создать индикатор текущего кадра
    dots() {
        const ol = document.createElement('ol');
        ol.classList.add('carousel-indicators');
        const children = [];
        for (let i = 0; i < this.frameCount; i++) {
            let li = document.createElement('li');
            if (i === 0) li.classList.add('active');
            ol.append(li);
            children.push(li);
        }
        this.slider.prepend(ol);
        return children;
    }

    // индекс первого элемента каждого кадра
    frames() {
        // все наборы элементов, которые потенциально могут быть кадрами
        let temp = [];
        for (let i = 0; i < this.itemCount; i++) {
            // этот набор из this.inFrame элементов без пустого места
            if (this.allItems[i + this.inFrame - 1] !== undefined) {
                temp.push(i);
            }
        }
        // с учетом того, что смещение this.offset может быть больше 1,
        // реальных кадров будет меньше или столько же
        let allFrames = [];
        for (let i = 0; i < temp.length; i = i + this.offset) {
            allFrames.push(temp[i]);
        }
        // в конце могут быть элементы, которые не могут образовать целый кадр (без пустоты),
        // такой кадр вообще не попадает в окно просмотра; вместо него показываем последний
        // целый кадр из числа потенциальных; при этом смещение будет меньше this.offset
        if (allFrames[allFrames.length - 1] !== temp[temp.length - 1]) {
            allFrames.push(temp[temp.length - 1]);
        }
        return allFrames;
    }
}

<link rel="stylesheet" href="slider.css">
<script src="slider.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        new Slider(document.querySelector('.carousel'), {
            inFrame: 2, // два элемента в кадре
            offset: 1, // смещать на один элемент
        });
    });
</script>

Поиск:
CSS • Frontend • HTML • JavaScript • Web-разработка • Изображение • Практика