Создаем свой слайдер для сайта

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

Инициализация карусели осуществляется посредством вызова функции и указания ей в качестве первого аргумента селектора, определяющего слайдер в документе:

// инициализация элемента .slider в качестве карусели
slideShow('.slider');

Кроме селектора функции можно передать дополнительные параметры, все они указываются в формате объекта посредством 2 параметра:

// инициализация элемента .slider в качестве карусели и настройка её с помощью дополнительных параметров
slideShow('.slider', {
  isAutoplay: false, // false (по умолчанию) или true
  directionAutoplay: 'next', // 'next' (по умолчанию) или 'prev'
  delayAutoplay: 5000, // 5000 (по умолчанию) или любое другое число
  isPauseOnHover: true // true (по умолчанию) или false
});

Назначение ключей:

– определяет, необходимо ли инициализировать слайдер с автоматической сменой элементов (по умолчанию этот ключ имеет значение );
– определяет направление для механизма автоматической смены слайдов (по умолчанию ‘next’); для изменения направления установите ‘prev’;
– задержка в миллисекундах перед процессом автоматической сменой одного слайда на другой (по умолчанию 5000 мс);
– определяет необходимо ли останавливать автоматическую смену слайдов при нахождении курсора в зоне слайдера (по умолчанию )

Например, если вам нужно инициализировать слайдер и включить у него автоматическую смену слайдов, то используйте следующую конструкцию:

// инициализация элемента .slider в качестве карусели и настройка её с помощью дополнительных параметров
slideShow('.slider', {
  isAutoplay: true
});

Кроме этого, вы можете управлять слайдом с помощью методов. Для этого вам нужно сохранить в переменную результат выполнения функции :

// инициализация элемента .slider в качестве карусели и настройка её с помощью дополнительных параметров
var sliderOne = slideShow('.slider');

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

// выполняет переход на следующий слайд
sliderOne.next();

Список методов слайдера:

– останавливает автоматическую смену слайдов;
– выполняет переход на следующий слайд;
– выполняет переход на предыдущий слайд;
– включает автоматическую смену слайдов.

Точки фиксации

Html формы для сайта

Как заметил Майкл Шарнагль, некоторые браузеры, включая Safari и Firefox, поддерживают простой CSS-метод фиксации слайдов при прокрутке или использовании клавиш со стрелками. Так как Safari не поддерживает (уже поддерживается с , прим. переводчика), то это один из способов сделать удобнее пользователям этого браузера. Мешанина из проприетарных и стандартных свойств ниже: вот что сработало в нашем случае.

 {   -webkit-overflow-scrolling: touch;  -webkit-scroll-snap-type: mandatory;  -ms-scroll-snap-type: mandatory;  scroll-snap-type: mandatory;  -webkit-scroll-snap-points-x: repeat(100%);  -ms-scroll-snap-points-x: repeat(100%);  scroll-snap-points-x: repeat(100%);}

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

Пишем код

Размер изображений для сайта

На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:

HTML — язык гипертекстовой разметки, на котором пишется «скелет» сайта. Если провести аналогию с домом, то это каркас. Грубо говоря, вы строите разметку, на которую после будет ложиться оформление.
CSS — каскадные таблицы стилей или то самое оформление. Вернёмся к примеру с домом: после постройки его нужно облицевать, покрасить, сделать презентабельным, и именно CSS описывает внешний вид сайта.
JavaScript — язык программирования, который обеспечивает функциональность. Вы можете взаимодействовать с вещами в вашем доме — включать и выключать свет, бытовую технику, воду и многое другое. Вы точно так же можете взаимодействовать с сайтом, нажимая кнопки, наводя курсор на изображения и заполняя формы. JavaScript обрабатывает все эти взаимодействия, и, как язык сценариев, он может предоставлять правила и логику для определения того, что должно произойти дальше.

HTML

Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:

Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами . Здесь всё просто: у нас есть основной блок (тег ), который является родительским и содержит ещё три блока с разными картинками — будущими слайдами:

Обратите внимание, что у каждого тега есть свой класс. Именно по этим классам будет применяться оформление CSS

В тегах мы указываем ссылки на те изображения, которые будут показываться. В атрибуте onclick мы обращаемся к конкретной функции JavaScript, привязывая к кнопке действие по клику.

CSS

В каскадных стилях задаём ширину, высоту, позиционирование, цвет и анимацию. В нашем случае мы работаем отдельно с контейнером слайдера, отдельно с контейнерами картинок, которые прописаны как item, кнопками, добавлением к ним фона и анимацией слайдов:

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

JavaScript

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

Но не стоит забывать, что не JavaScript единым: современные библиотеки и фреймворки способны упростить разработку и улучшить функциональность веб-компонента. Например, Bootstrap позволяет верстать сайты в разы быстрее, и даже начинающий разработчик может создать рабочий макет с использованием данного фреймворка. А ещё можно написать слайдер на чистом HTML/CSS, чтобы потренировать навыки в вёрстке и каскадных таблицах стилей.

Приведённый в уроке пример довольно прост и призван показать возможности стандартного взаимодействия HTML, CSS и JavaScript.

Поддержка клавиатуры

Синтаксис css. подключение внешних таблиц. создаем первый стиль

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

Те, кто пользуется клавиатурой, могут взаимодействовать со слайдером только тогда, когда на нём сделан фокус.

При нормальных обстоятельствах большинство элементов по умолчанию не получают фокус. Его могут получить только определённые интерактивные элементы, например, ссылки и контролы с тегом . Пользователи не должны иметь возможности сделать фокус на неинтерактивных элементах. Если такое происходит, то это нарушение критерия WCAG 2.4.3. Порядок фокуса. Причина в том, что фокус должен предшествовать активации, и если активация невозможна, тогда зачем давать элемент в руки пользователям?

Чтобы дать пользователям возможность сделать фокус на слайдере, нам нужно добавить . Поскольку элемент (на котором сделан фокус) будет теперь объявлен скринридерами, мы должны присвоить ему роль и добавить подпись, которые его идентифицируют. В последующих демо мы будем использовать слайдер для показа произведений искусства, поэтому подпись «Галерея» кажется подходящей.

<div role="region" aria-label="Галерея" tabindex="0">     <!-- Список изображений галереи --></div>

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

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

Images as Indicators

An example of using images as indicators:

Example

Multiple Slideshows on the Same Page

To operate multiple slideshows on one page, you must class the members of
each slideshow group with different classes:

Example

HTML:

<div class=»sl-container»>
<div class=»swipe»>
<div class=»panel» data-img=»/photo-1.jpg»></div>
<div class=»panel» data-img=»/photo-2.jpg»></div>
<div class=»panel» data-img=»/photo-3.jpg»></div>
<div class=»panel» data-img=»/photo-4.jpg»></div>
<div class=»panel» data-img=»/photo-5.jpg»></div>
</div>
<div class=»sl-info»>
<div class=»inner»>
<h3>Слайдер с фиксированным текстом</h3>
<p>Текст накладывается на слайдер, в котором листаются только фотографии</p>
</div>
<div class=»sl-buttons»>
<button class=»btn-prev» disabled>
<svg xmlns=»http://www.w3.org/2000/svg» width=»40″ height=»40″ viewBox=»0 0 24 24″ fill=»none» stroke=»#fff» stroke-width=»3″ stroke-linecap=»round» stroke-linejoin=»round»><polyline points=»15 18 9 12 15 6″></polyline></svg>
</button>
<button class=»btn-next»>
<svg xmlns=»http://www.w3.org/2000/svg» width=»40″ height=»40″ viewBox=»0 0 24 24″ fill=»none» stroke=»#fff» stroke-width=»3″ stroke-linecap=»round» stroke-linejoin=»round»><polyline points=»9 18 15 12 9 6″></polyline></svg>
</button>
</div>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

</div>

<h3>Слайдер с фиксированным текстом</h3>

<p>Текст накладывается на слайдер, в котором листаются только фотографии</p>

</div>

</button>

</button>

</div>

О слайдере chiefSlider

chiefSlider – это простой, адаптивный и легко настраиваемый слайдер для сайта, в элементах которого можно использовать различный контент. Реализован он с применением CSS Flexbox и трансформаций. Его логика написана на чистом JavaScript без использования каких-либо сторонних библиотек.

chiefSlider является очень гибким. Одна часть его настроек выполняется в HTML, другая — в CSS, и третья — в JavaScript.

В HTML мы можем определить будет ли у слайдера навигация (кнопки для перехода к предыдущему и следующему слайду) и пагинация.

В CSS настраивается количество одновременно отображаемых слайдов. При этом, на разных viewport при необходимости мы можем задать показ разного количества слайдов. Это осуществляется посредством медиа запросов. Это особенность слайдера позволяет сформировать ему вид уже на этапе CSS без использования JavaScript

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

Кстати, этот слайдер отличается от большего количества других очень популярных слайдеров и каруселей (например, slick, splide, swiper и owlCarousel) тем, что он для организации зацикленности слайдов вообще не создаёт клоны элементов (например, не дублирует последний слайд перед первым и первый после последнего).

Кроме этого, он написан на чистом JavaScript, и, следовательно не зависит от jQuery, как например, OwlCarousel и slick.

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

Ссылка на проект слайдера на GitHub:

вторая версия — chiefSlider v.2;
первая версия — chiefSlider v.1.

2. HTML5 Gallery Slideshow

HTML5 Gallery Slideshow — отличный выбор для демонстрации изображений и текста в виде слайдера. Главным преимуществом продаж карусели является ее невероятная простота в использовании. После внедрения в необходимое место, она адаптируется по размеру родительского контейнера, то есть к тегу div или другому тегу HTML.

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

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

JavaScript слайд шоу на базе разработанной библиотеки

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

На самом деле, реализация JavaScript слайд шоу отличается от обычного слайдера совсем незначительно. Разница заключается лишь в том, что в слайд шоу слайды переключаются автоматически с заданным временным интервалом, а в случае обычной JS карусели они меняются вручную с помощь элементов навигации.

Для автоматической прокрутки слайдов я добавил в самый конец своего класса следующий метод:

slideShow: function (timeout) {
    var sliderCount = this.links.length;
    var self = this;

    this.slideCycle = setInterval(function () {
        var currentSlideNumber = document.querySelector('#slider-nav a.current').getAttribute("data-slide");
        var slideId = parseInt(currentSlideNumber, 10) + 1;
        self.slide(document.querySelector(''));
    }, timeout);
}

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

Сценарий действия передаётся первым аргументом в виде анонимной функции, а временной интервал — вторым, который я решил сделать в виде переменной, значение которой передаётся при вызове slideShow().

Единственная модификация кода внутри setInterval(), которая потребовалась, — это определение количества слайдов и сравнение с ним индекса текущего слайда для зацикленности автоматического переключения.

Ну, и для того, чтобы данный код заработал, сам метод необходимо вызвать. Я решил сделать это всё в том же navigate(), который как раз и является сборником всяких сценариев. Вызов я разместил в самом конце, передав в качестве аргумента значение временного интервала для автоматической смены слайдов в нашем JS слайд шоу (я выбрал 2000 милисекунд или 2 секунды, вы можете по необходимости изменять это число):

self.slideShow(2000);

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

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

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

Для прерывания автоматического показа слайдов JavaScript карусели я решил воспользоваться стандартной JS функцией clearInterval(), которой в качестве аргумента передаю идентификатор временного интервала, возвращаемого функцией setInterval() при его установке.

В итоге, получился следующий код, который я решил не оформлять отдельным методом:

clearInterval(self.slideCycle);

И разместил его в местах описания действий при кликах на различные элементы навигации, т.е. в следующих:

link.addEventListener("click", function (e) {...});

self.prevBtn.addEventListener('click', function (e) {...});

self.nextBtn.addEventListener('click', function (e) {...});

Вызов clearInterval() лучше делать поближе к самому событию клика, главное, чтобы перед ним, а не после.

JavaScript:

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

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Берём кнопку вперёд

let btnRight=document.querySelector(«.btnRight»);

// Берём слайды

let slides=document.querySelectorAll(«img»);

// Объявляем переменную i

leti=;

// Объявляем событие нажатия на кнопку вперёд

btnRight.addEventListener(«click»,function(){

// Увеличиваем переменную i

++i

// Условие если переменная i больше или равна количеству слайдов

if(i>=slides.length){

// Удаляем класс block предыдущему слайду

slidesi-1.classList.remove(«block»);

// Присваиваем переменной i ноль

i=;

// Добавляем класс block следующему слайду

slidesi.classList.add(«block»);

}else{// Иначе

// Удаляем класс block предыдущему слайду

slidesi-1.classList.remove(«block»);

// Добавляем класс block следующему слайду

slidesi.classList.add(«block»);

}

})

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

6. HTML5 Responsive Slider Gallery

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

Чтобы понять, почему HTML5 Responsive Slider Gallery является бестселлером на CodeCanyon, достаточно нажать предварительный просмотр плагина.

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

HTML:

<div class=»slideshow»>
<div class=»slideshow-item»>
<img src=»photo-1.jpg» alt=»»>
<div class=»slideshow-item-text»>
<h5>Заголовок</h5>
<p>Описание</p>
</div>
</div>
<div class=»slideshow-item»>
<img src=»photo-2.jpg» alt=»»>
<div class=»slideshow-item-text»>
<h5>Заголовок</h5>
<p>Описание</p>
</div>
</div>
<div class=»slideshow-item»>
<img src=»photo-3.jpg» alt=»»>
<div class=»slideshow-item-text»>
<h5>Заголовок</h5>
<p>Описание</p>
</div>
</div>
<div class=»slideshow-item»>
<img src=»photo-4.jpg» alt=»»>
<div class=»slideshow-item-text»>
<h5>Заголовок</h5>
<p>Описание</p>
</div>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<h5>Заголовок</h5>

<p>Описание</p>

</div>

<h5>Заголовок</h5>

<p>Описание</p>

</div>

<h5>Заголовок</h5>

<p>Описание</p>

</div>

<h5>Заголовок</h5>

<p>Описание</p>

</div>

Smart Slider 3

На мой взгляд, это самый интересный и многофункциональный слайдер из всех бесплатных плагинов для WordPress на сегодняшний день!

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

Основные особенности Smart Slider 3:

Приятный интерфейс и неограниченное количество слайдеров и слайдов
Возможность добавления слоёв на слайд
Поддержка шаблонов. Вы можете создавать и сохранять свои шаблоны для слайдов или загружать уже готовые из библиотеки Smart Slider
Настройка фона. Можно использовать цвета, задавать градиентные переходы, фоновые изображения и регулировать прозрачность
Можно дублировать слайдер и слайды
Расширенные настройки навигации. Можно выбирать изображения для кнопок навигации, их положение на слайде, цвет (обычный и при наведении), прозрачность и смещение
Возможность добавления миниатюр, для слайдов
Наличие интересных и оригинальных теней
Задание определённого размера слайд шоу или растягивание на всю ширину
Наличие вертикальной и горизонтальной прокрутки для слайдов, а также поддержка сенсорных экранов и управления колёсиком мышки
Можно настраивать анимации для фона и слайдов. Smart Slider 3 содержит довольно неплохой набор плавных анимаций с возможностью их предпросмотра
Задание размеров слайдера для мобильных устройств
Настройка автопрокрутки и скорости смены слайдов
Возможность оптимизации изображений. Такой функцией далеко не каждый платный плагин может похвастаться, а здесь это есть в функционале бесплатной версии!

Пожалуй, это основные его особенности, но далеко не все.

Без JavaScript

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

<noscript>    <img src="" alt=""></noscript>

Отдельное демо слайдера с ленивой загрузкой.

Теперь наш слайдер работает и без JavaScript. У нас неплохо выходит. Однако мы обрабатываем только случай «без JavaScript», который редко встречается. Это не печально распространённая ситуация со «сломанным JavaScript». Рик Шеннинк решил эту проблему, поместив в документа. Есть демо с этим методом, где Рик сначала заменяет на , и при тестировании довольно надёжно извлекает источники изображения при первой загрузке.

Кнопки вперёд и назад

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

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

Хитрость заключается в том, чтобы использовать уже разработанную нами функциональность, а не заменять её. Наши кнопки должны заранее знать о том, что кто-то уже прокручивает или свайпает слайды, и уметь с этим работать.

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

slides.forEach(entry => {    entry.target.classList.remove('visible')  if (!entry.isIntersecting) {    return  }  let img = entry.target.querySelector('img')  if (img.dataset.src)  {    img.setAttribute('src', img.dataset.src)    img.removeAttribute('data-src')  }  entry.target.classList.add('visible')})

Скрипт слайдера

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

Готовые решения выглядят стильно и необычно.

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

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

Например, это элементарный плагин Coin Slider. Он не требует специальных знаний для установки. Простой функционал является его основным достоинством.

А вот Slideshow Gallery позволяет создавать слайдеры с превью. Если кликнуть на картинку, она автоматически увеличится.

Как создать слайдер с зацикливанием? — 1 версия

Зацикливание слайдов можно выполнить посредством трансформирования элементов .

Для этого необходимо к каждому элементу привязать значения его текущей позиции и трансформации.

Наиболее оптимально эти действия можно выполнить с помощью массива :

var _items = [];

// наполнение массива элементами .slider__item
_sliderItems.forEach(function (item, index) {
  _items.push({ item: item, position: index, transform: 0 });
});

Но связать данные с элементами можно выполнить не только посредством массива, а например, с помощью data-атрибутов. Но операции с DOM самые медленные и ресурсоёмкие, их не рекомендуется использовать, когда это можно выполнить как-то по-другому.

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

var position = {
  getItemMin: function () {
    var indexItem = 0;
    _items.forEach(function (item, index) {
      if (item.position < _items.position) {
        indexItem = index;`
      }
    });
    return indexItem;
  },
  getItemMax: function () {
    var indexItem = 0;
      _items.forEach(function (item, index) {
        if (item.position > _items.position) {
          indexItem = index;
        }
      });
    return indexItem;
  },
  getMin: function () {
    return _items.position;
  },
  getMax: function () {
    return _items.position;
  }
}
</pre>
<p><span class="font-weight-bold">Последний основной шаг</span>, который предстоит выполнить - это доработать функцию <code class="code">_transformItem</code>. А именно добавить к ней код, который будет изменять позицию элемента <code class="code">.slider__item</code> и выполнять его трансформацию.</p>
<pre class="prettyprint">
var _transformItem = function (direction) {
  var nextItem;
  if (direction === 'right') {
    _positionLeftItem++;
    if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) {
      nextItem = position.getItemMin();
      _items.position = position.getMax() + 1;
      _items.transform += _items.length * 100;
      _items.item.style.transform = 'translateX(' + _items.transform + '%)';
    }
    _transform -= _step;
  }
  if (direction === 'left') {
    _positionLeftItem--;
    if (_positionLeftItem < position.getMin()) {
      nextItem = position.getItemMax();
      _items.position = position.getMin() - 1;
      _items.transform -= _items.length * 100;
      _items.item.style.transform = 'translateX(' + _items.transform + '%)';
    }
    _transform += _step;
  }
  _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}

На самом деле здесь всё просто.

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

Если такой элемент в массиве есть, то выполняется трансформация элемента (т.е. действия, как и в алгоритме без зацикливания).

А вот если такого элемента нет, то кроме трансформации , выполняется ещё ряд действий. Во-первых, в массиве ищется элемент с минимальной позицией. После получения этого элемента, ему устанавливается позиция, значение которой будет равно значению текущего правого элемента + 1. Ну и конечно выполняется его трансформация, на такое количество процентов, чтобы он оказался в конце, т.е. после последнего элемента.

Для перехода к предыдущему слайду выполняются аналогичные действия, но наоборот.

Кроме этого для слайдера с зацикливанием не нужно переключать видимость кнопок «Влево» и «Вправо». Данные кнопки в этой версии слайдера будут отображаться всегда.

Чтобы это выполнить необходимо:

удалить класс у элемента управления «Вправо»;
в CSS для селектора изменить значение свойства на .

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