Как сделать слайд шоу javascript

Шаг 2) Добавить CSS:

Стиль следующей и предыдущей кнопок, текста заголовка и точек:

Пример

/* Контейнер слайд-шоу */
.slideshow-container max-width: 1000px;
position: relative;
margin: auto;
>

/* Скрыть изображения по умолчанию */
.mySlides display: none;
>

/* Вперед иназад кнопки */
.prev, .next cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
>

/* Положение «next кнопки» справа */
.next right: 0;
border-radius: 3px 0 0 3px;
>

/* При наведении курсора добавьте черный цвет фона с немного прозрачным */
.prev:hover, .next:hover background-color: rgba(0,0,0,0.8);
>

/* Подпись текст */
.text color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
>

/* Номер текста (1/3 и т.д.) */
.numbertext color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
>

/* Точки/пули/индикаторы */
.dot cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
>

.active, .dot:hover background-color: #717171;
>

/* Исчезающая анимация */
.fade -webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
>

Шаг 3) Добавить JavaScript:

Пример

var slideIndex = 1;
showSlides(slideIndex);

// Вперед/назад элементы управления
function plusSlides(n) showSlides(slideIndex += n);
>

// Элементы управления миниатюрами изображений
function currentSlide(n) showSlides(slideIndex = n);
>

function showSlides(n) var i;
var slides = document.getElementsByClassName(«mySlides»);
var dots = document.getElementsByClassName(«dot»);
if (n > slides.length)
if (n < 1)
for (i = 0; i < slides.length; i++) slides[i].style.display = "none";
>
for (i = 0; i < dots.length; i++) dots[i].className = dots[i].className.replace(" active", "");
>
slides[slideIndex-1].style.display = «block»;
dots[slideIndex-1].className += » active»;
>

Автоматическое Слайд-шоу

Чтобы отобразить автоматическое слайд-шоу, используйте следующий код:

Пример

var slideIndex = 0;
showSlides();

function showSlides() var i;
var slides = document.getElementsByClassName(«mySlides»);
for (i = 0; i < slides.length; i++) slides[i].style.display = "none";
>
slideIndex++;
if (slideIndex > slides.length)
slides[slideIndex-1].style.display = «block»;
setTimeout(showSlides, 2000); // Меняйте изображение каждые 2 секунды
>

Несколько Слайд-шоу

Пример

var slideIndex = [1,1];
/* Класс чисел каждой группы слайд-шоу с различными классами CSS */
var slideId = [«mySlides1», «mySlides2»]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) showSlides(slideIndex[no] += n, no);
>

function showSlides(n, no) var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length)
if (n < 1)
for (i = 0; i < x.length; i++) x[i].style.display = "none";
>
x[slideIndex[no]-1].style.display = «block»;
>

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

В этой статье мы опишем основные принципы построения слайд-шоу на JavaScript, то, из чего они строятся (HTML, CSS, JavaScript) и техники, которые используются при их создании.

JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.

В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.

Структура HTML

Разметка HTML должна быть такой, чтобы страница оставалась читаемой и без CSS и JS. Поэтому нужно разобраться, какие компоненты будут составлять нашу структуру. Обычно это:

1) самый внешний контейнер
2) внутренний враппер
3) несколько элементов-слайдов
4) враппер для ссылок на страницы
5) две кнопки «предыдущая» и «следующая»

Компоненты 2, 4 и 5 необязательные, поскольку:

— слайды можно обернуть и в один элемент. Это делают, когда переход между слайдами делается через fade in / fade out
— ссылки на страницы и кнопки можно опустить, если слайд-шоу автоматическое, и происходит без вмешательства пользователя

Пример возможной HTML-структуры:

 
 
.
 
.
 
.
 
 
 Предыдущий Следующий 
 
 

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

Элементы с кнопками используются вместо ссылок, поскольку ссылки здесь не подходят, а с кнопками мы будем работать из скрипта (подробности читайте в материале You can’t create a button).

Если в слайдах содержатся только картинки, можно слегка поменять структуру:

 
    
 
 Предыдущий Следующий 
 
 

Не забудьте добавить осмысленное значение атрибуту alt.

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

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

Бывают слайд-шоу, комбинирующие ссылки и управление:

Отметим использование атрибутов «data» – некоторые слайд-шоу умеют вставлять картинки как фон, и эти атрибуты будут использованы в скрипте как места для связи фона и слайда.

Использование списков

Семантически верным подходом будет использование элементов списка как слайдов. В этом случае структура будет такой:

Если порядок слайдов хорошо определён (к примеру, в презентации), можно использовать нумерованные списки

 
 
CSS
 
Начнём со следующей структуры: 
 
 
    
 
 Предыдущий Следующий 
 
 

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

.slider < width: 1024px; overflow: hidden; >.slider-wrapper

Стили внутреннего враппера включают:

— большая ширина
— фиксированная высота, максимальная высота слайда
— position: relative, что позволит создать перемещение слайдов
— CSS transition left, что позволит сделать движение плавным. Для простоты мы не указали все префиксы. Для этого также можно использовать CSS transformations (вместе с translation).

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

.slide

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

Навигация осуществляется через кнопки “Предыдущий” и “Следующий”. Обнуляем их стили по умолчанию и назначаем свои:

.slider-nav < height: 40px; width: 100%; margin-top: 1.5em; >.slider-nav button < border: none; display: block; width: 40px; height: 40px; cursor: pointer; text-indent: -9999em; background-color: transparent; background-repeat: no-repeat; >.slider-nav button.slider-previous < float: left; background-image: url(previous.png); >.slider-nav button.slider-next

При использовании ссылок на страницы вместо кнопок можно сделать следующие стили:

.slider-nav < text-align: center; margin-top: 1.5em; >.slider-nav a < display: inline-block; text-decoration: none; border: 1px solid #ddd; color: #444; width: 2em; height: 2em; line-height: 2; text-align: center; >.slider-nav a.current

Эти классы будут назначены из скрипта динамически.

Такой подход годится для эффекта скольжения. Если мы хотим достичь эффекта исчезновения и появления, надо поменять стили, поскольку float добавляет горизонтальные отступы между слайдами. То есть, слайды на одной линии нам не нужны – нам нужна «пачка» слайдов:

.slider < width: 1024px; margin: 2em auto; >.slider-wrapper < width: 100%; height: 683px; position: relative; /* Создаёт контекст для абсолютного позиционирования */ >.slide < position: absolute; /* Абсолютное позиционирование всех слайдов */ width: 100%; height: 100%; opacity: 0; /* Все слайды скрыты */ transition: opacity 500ms linear; >/* Изначально виден только первый */ .slider-wrapper > .slide:first-child

Для скрытия слайдов мы используем свойство opacity, поскольку программы для чтения данных с экрана пропускают содержимое элементов, у которых установлен display: none (см. CSS in Action: Invisible Content Just for Screen Reader Users).

Благодаря контекстному позиционированию CSS мы создали «пачку» слайдов, где последний слайд в исходнике оказывается впереди других. Но нам не это нужно. Для сохранения порядка слайдов нам надо спрятать все слайды, кроме первого.

JS задействует CSS transition, меняя значение свойства opacity у текущего слайда, и обнуляя это значение у всех остальных.

Проблемы с IE9

IE9 не поддерживает CSS transitions. Изменение значения свойства мгновенно поменяет его внешний вид. Для плавности нам придётся воспользоваться jQuery. Подробности по возможным решениям читайте в этой ветке на Stack Overflow.

Код на JavaScript

Слайд-шоу без разбивки на страницы

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

Поэтому, когда мы первый раз нажимаем Следующий, указатель увеличивается на 1 и мы получаем второй слайд. Нажимая на Предыдущий, мы уменьшаем указатель и получаем первый слайд. И т.д.

Вместе с указателем мы используем метод jQuery .eq() для получения текущего слайда. На чистом JS это выглядит так:

function Slideshow( element ) < this.el = document.querySelector( element ); this.init(); >Slideshow.prototype = < init: function() < this.slides = this.el.querySelectorAll( ".slide" ); //. >, _slideTo: function( pointer ) < var currentSlide = this.slides[pointer]; //. >>; 

Помните — NodeList использует индексы так же, как массив. Ещё один способ выбрать текущий слайд – селекторы CSS3:

Slideshow.prototype = < init: function() < //. >, _slideTo: function( pointer ) < var n = pointer + 1; var currentSlide = this.el.querySelector( ".slide:nth-child(" + n + ")" ); //. >>; 

Селектор CSS3 :nth-child() считает элементы с 1, поэтому нужно добавить единичку к указателю. После выбора слайда его родительский контейнер надо сдвинуть справа налево. В jQuery можно использовать метод .animate():

(function( $ ) < $.fn.slideshow = function( options ) < options = $.extend(< wrapper: ".slider-wrapper", slides: ".slide", //. speed: 500, easing: "linear" >, options); var slideTo = function( slide, element ) < var $currentSlide = $( options.slides, element ).eq( slide ); $( options.wrapper, element ). animate(< left: - $currentSlide.position().left >, options.speed, options.easing ); >; //. >; >)( jQuery ); 

В обычном JS нет метода .animate(), поэтому мы используем переходы CSS:

.slider-wrapper < position: relative; // обязательно transition: left 500ms linear; >

Теперь можно менять свойство left динамически через объект style:

function Slideshow( element ) < this.el = document.querySelector( element ); this.init(); >Slideshow.prototype = < init: function() < this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); //. >, _slideTo: function( pointer ) < var currentSlide = this.slides[pointer]; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; >>; 

Теперь надо сделать событие клика для каждого элемента управления. В jQuery можно взять метод .on(), а в чистом JS — метод addEventListener().

Также надо проверять, не достиг ли указатель границ списка – 0 для “Предыдущий” и общего количества слайдов для “Следующий”. В каждом случае надо прятать соответствующую кнопку:

(function( $ ) < $.fn.slideshow = function( options ) < options = $.extend(< wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", next: ".slider-next", //. speed: 500, easing: "linear" >, options); var slideTo = function( slide, element ) < var $currentSlide = $( options.slides, element ).eq( slide ); $( options.wrapper, element ). animate(< left: - $currentSlide.position().left >, options.speed, options.easing ); >; return this.each(function() < var $element = $( this ), $previous = $( options.previous, $element ), $next = $( options.next, $element ), index = 0, total = $( options.slides ).length; $next.on( "click", function() < index++; $previous.show(); if( index == total - 1 ) < index = total - 1; $next.hide(); >slideTo( index, $element ); >); $previous.on( "click", function() < index--; $next.show(); if( index == 0 ) < index = 0; $previous.hide(); >slideTo( index, $element ); >); >); >; >)( jQuery ); 

А на чистом JS это выглядит так:

function Slideshow( element ) < this.el = document.querySelector( element ); this.init(); >Slideshow.prototype = < init: function() < this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); this.previous = this.el.querySelector( ".slider-previous" ); this.next = this.el.querySelector( ".slider-next" ); this.index = 0; this.total = this.slides.length; this.actions(); >, _slideTo: function( pointer ) < var currentSlide = this.slides[pointer]; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; >, actions: function() < var self = this; self.next.addEventListener( "click", function() < self.index++; self.previous.style.display = "block"; if( self.index == self.total - 1 ) < self.index = self.total - 1; self.next.style.display = "none"; >self._slideTo( self.index ); >, false); self.previous.addEventListener( "click", function() < self.index--; self.next.style.display = "block"; if( self.index == 0 ) < self.index = 0; self.previous.style.display = "none"; >self._slideTo( self.index ); >, false); > >; 

Примеры

Слайд-шоу с разделением на страницы

В таком слайд-шоу каждая ссылка отвечает за один слайд, поэтому указатель не нужен. Анимации не меняются – меняется способ, которым пользователь перемещается по слайдам. Для jQuery у нас будет следующий код:

(function( $ ) < $.fn.slideshow = function( options ) < options = $.extend(< wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" >, options); var slideTo = function( slide, element ) < var $currentSlide = $( options.slides, element ).eq( slide ); $( options.wrapper, element ). animate(< left: - $currentSlide.position().left >, options.speed, options.easing ); >; return this.each(function() < var $element = $( this ), $navigationLinks = $( "a", options.nav ); $navigationLinks.on( "click", function( e ) < e.preventDefault(); var $a = $( this ), $slide = $( $a.attr( "href" ) ); slideTo( $slide, $element ); $a.addClass( "current" ).siblings(). removeClass( "current" ); >); >); >; >)( jQuery ); 

В этом случае каждый анкор соответствует ID определённого слайда. В чистом JS можно использовать как его, так и атрибут data, хранящий числовой индекс слайдов внутри NodeList:

function Slider( element ) < this.el = document.querySelector( element ); this.init(); >Slider.prototype = < init: function() < this.links = this.el.querySelectorAll( "#slider-nav a" ); this.wrapper = this.el.querySelector( "#slider-wrapper" ); this.navigate(); >, navigate: function() < for ( var i = 0; i < this.links.length; ++i ) < var link = this.links[i]; this.slide( link ); >>, slide: function( element ) < var self = this; element.addEventListener( "click", function( e ) < e.preventDefault(); var a = this; self.setCurrentLink( a ); var index = parseInt( a.getAttribute( "data-slide" ), 10 ) + 1; var currentSlide = self.el.querySelector( ".slide:nth-child(" + index + ")" ); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; >, false); >, setCurrentLink: function(link) < var parent = link.parentNode; var a = parent.querySelectorAll( "a" ); link.className = "current"; for ( var j = 0; j < a.length; ++j ) < var cur = a[j]; if ( cur !== link ) < cur.className = ""; >> > >; 

Начиная с IE10 можно управлять классами через classList:

link.classList.add( "current" ); 

А с IE11 атрибуты data можно получать через свойство dataset:

var index = parseInt( a.dataset.slide, 10 ) + 1; 

Примеры

Слайд-шоу с разделением на страницы и элементами управления

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

Если мы нажимаем на ссылку №3, то указатель надо установить в 2 – чтобы, нажав на «Предыдущий», мы попали на второй слайд. То есть, нужно делать синхронизацию.

Синхронизировать это можно через номерной индекс каждой ссылки в DOM. Один линк – один слайд, поэтому их индексы будут 0, 1, 2 и т.д.

На jQuery код будет такой:

(function( $ ) < $.fn.slideshow = function( options ) < options = $.extend(< //. pagination: ".slider-pagination", //. >, options); $.fn.slideshow.index = 0; return this.each(function() < var $element = $( this ), //. $pagination = $( options.pagination, $element ), $paginationLinks = $( "a", $pagination ), //. $paginationLinks.on( "click", function( e ) < e.preventDefault(); var $a = $( this ), elemIndex = $a.index(); // DOM numerical index $.fn.slideshow.index = elemIndex; if( $.fn.slideshow.index >0 ) < $previous.show(); >else < $previous.hide(); >if( $.fn.slideshow.index == total - 1 ) < $.fn.slideshow.index = total - 1; $next.hide(); >else < $next.show(); >slideTo( $.fn.slideshow.index, $element ); $a.addClass( "current" ). siblings().removeClass( "current" ); >); >); >; //. >)( jQuery ); 

Сразу видно, что изменилась видимость курсора – теперь индекс объявлен как свойство объекта слайд-шоу. Таким образом мы избегаем проблем с областью видимости, которые могут быть созданы обратными вызовами в jQuery. Теперь курсор доступен везде, и даже вне пространства имён плагина, поскольку он объявлен как публичное свойство объекта slideshow.

Метод .index() даёт числовой индекс каждой ссылки.

В чистом JS нет такого метода, так что проще использовать атрибуты данных:

(function() < function Slideshow( element ) < this.el = document.querySelector( element ); this.init(); >Slideshow.prototype = < init: function() < this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); this.previous = this.el.querySelector( ".slider-previous" ); this.next = this.el.querySelector( ".slider-next" ); this.navigationLinks = this.el.querySelectorAll( ".slider-pagination a" ); this.index = 0; this.total = this.slides.length; this.setup(); this.actions(); >, //. setup: function() < var self = this; //. for( var k = 0; k < self.navigationLinks.length; ++k ) < var pagLink = self.navigationLinks[k]; pagLink.setAttribute( "data-index", k ); // Или pagLink.dataset.index = k; >>, //. >; >)(); 

Теперь мы можем соединить наши процедуры со ссылками и использовать только что созданные атрибуты данных:

actions: function() < var self = this; //. for( var i = 0; i < self.navigationLinks.length; ++i ) < var a = self.navigationLinks[i]; a.addEventListener( "click", function( e ) < e.preventDefault(); var n = parseInt( this.getAttribute( "data-index" ), 10 ); // Или var n = parseInt( this.dataset.index, 10 ); self.index = n; if( self.index == 0 ) < self.index = 0; self.previous.style.display = "none"; >if( self.index > 0 ) < self.previous.style.display = "block"; >if( self.index == self.total - 1 ) < self.index = self.total - 1; self.next.style.display = "none"; >else < self.next.style.display = "block"; >self._slideTo( self.index ); self._highlightCurrentLink( this ); >, false); > > 

Примеры

Разбираемся с размерами

Вернёмся-ка к следующему правилу CSS:

.slider-wrapper

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

На jQuery это просто:

// Слайд-шоу на всю ширину return this.each(function() < var $element = $( this ), total = $( options.slides ).length; //. $( options.slides, $element ).width( $( window ).width() ); $( options.wrapper, $element ).width( $( window ).width() * total ); //. >); 

Берём ширину окна и задаём ширину каждого слайда. Общая ширина внутреннего враппера получается перемножением ширины окна и количества слайдов.

// Слайд-шоу фиксированной ширины return this.each(function() < var $element = $( this ), total = $( options.slides ).length; //. $( options.wrapper, $element ).width( $( options.slides ).eq( 0 ).width() * total ); //. >); 

Здесь начальная ширина задана шириной каждого слайда. Нужно только задать общую ширину враппера.

Теперь внутренний контейнер достаточно широк. На чистом JS это делается примерно так же:

// Слайд-шоу на всю ширину Slideshow.prototype = < init: function() < this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); //. this.total = this.slides.length; this.setDimensions(); this.actions(); >, setDimensions: function() < var self = this; // Viewport's width var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for( var i = 0; i < self.total; ++i ) < var slide = self.slides[i]; slide.style.width = winWidth + "px"; >self.wrapper.style.width = wrapperWidth + "px"; >, //. >; // Слайд-шоу фиксированной ширины Slideshow.prototype = < init: function() < this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.slides = this.el.querySelectorAll( ".slide" ); //. this.total = this.slides.length; this.setDimensions(); this.actions(); >, setDimensions: function() < var self = this; var slideWidth = self.slides[0].offsetWidth; // Single slide's width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; >, //. >; 

Эффекты исчезновения

Эффекты исчезновения (fade) часто используются в слайд-шоу. Текущий слайд исчезает, и появляется следующий. У jQuery есть методы fadeIn() и fadeOut(), которые работают как со свойством opacity, так и с display, поэтому элемент удаляется из страницы по завершению анимации (display:none).

В чистом JS лучше всего работать со свойством opacity и использовать стек позиционирования CSS. Тогда изначально слайд будет видимым (opacity: 1), а другие — спрятаны (opacity:0).

Следующий набор стилей демонстрирует такой способ:

.slider < width: 100%; overflow: hidden; position: relative; height: 400px; >.slider-wrapper < width: 100%; height: 100%; position: relative; >.slide < position: absolute; width: 100%; height: 100%; opacity: 0; >.slider-wrapper > .slide:first-child

В чистом JS необходимо зарегистрировать переход CSS каждого слайда:

.slide

С jQuery для использования методов fadeIn() и fadeOut() надо менять opacity и display:

.slide < float: left; position: absolute; width: 100%; height: 100%; display: none; >.slider-wrapper > .slide:first-child

В jQuery код следующий:

(function( $ ) < $.fn.slideshow = function( options ) < options = $.extend(< wrapper: ".slider-wrapper", previous: ".slider-previous", next: ".slider-next", slides: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" >, options); var slideTo = function( slide, element ) < var $currentSlide = $( options.slides, element ).eq( slide ); $currentSlide. animate(< opacity: 1 >, options.speed, options.easing ). siblings( options.slides ). css( "opacity", 0 ); >; //. >; >)( jQuery ); 

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

В JavaScript это будет:

Slideshow.prototype = < //. _slideTo: function( slide ) < var currentSlide = this.slides[slide]; currentSlide.style.opacity = 1; for( var i = 0; i < this.slides.length; i++ ) < var slide = this.slides[i]; if( slide !== currentSlide ) < slide.style.opacity = 0; >> >, //. >; 

Примеры

Медийные элементы: видео

Мы можем включать видео в слайд-шоу. Вот пример слайд-шоу с видео от Vimeo:

Видео включаются через iframe. Это такой же заменяемый inline-block, как и картинка. Заменяемый – потому, что содержимое взято из внешнего источника.

Чтобы создать полностраничное слайд-шоу, надо поменять стили следующим образом:

html, body < margin: 0; padding: 0; height: 100%; min-height: 100%; /* Высота должна быть со всю страницу */ >.slider < width: 100%; overflow: hidden; height: 100%; min-height: 100%; /* Высота и ширина на полную */ position: absolute; /* Абсолютное позиционирование */ >.slider-wrapper < width: 100%; height: 100%; /* Высота и ширина на полную */ position: relative; >.slide < float: left; position: absolute; width: 100%; height: 100%; >.slide iframe < display: block; /* Блочный элемент */ position: absolute; /* Абсолютное позиционирование */ width: 100%; height: 100%; /* Высота и ширина на полную */ >

Примеры

Автоматические слайд-шоу

Автоматические слайд-шоу используют таймеры. При каждом обратном вызове функции по таймеру setInterval() курсор будет увеличиваться на 1 и таким образом будет выбираться следующий слайд.

Когда курсор достигнет максимального количества слайдов, его надо обнулить.

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

(function( $ ) < $.fn.slideshow = function( options ) < options = $.extend(< slides: ".slide", speed: 3000, easing: "linear" >, options); var timer = null; // Таймер var index = 0; // Курсор var slideTo = function( slide, element ) < var $currentSlide = $( options.slides, element ).eq( slide ); $currentSlide.stop( true, true ). animate(< opacity: 1 >, options.speed, options.easing ). siblings( options.slides ). css( "opacity", 0 ); >; var autoSlide = function( element ) < // Инициализируем последовательность timer = setInterval(function() < index++; // Увеличим курсор на 1 if( index == $( options.slides, element ).length ) < index = 0; // Обнулим курсор >slideTo( index, element ); >, options.speed); // Тот же интервал, что и в методе .animate() >; var startStop = function( element ) < element.hover(function() < // Останавливаем анимацию clearInterval( timer ); timer = null; >, function() < autoSlide( element ); // Возобновляем анимацию >); >; return this.each(function() < var $element = $( this ); autoSlide( $element ); startStop( $element ); >); >; >)( jQuery ); 

Оба параметра метода .stop() установлены в true, т.к. нам не нужно создавать очередь анимации из нашей последовательности.

На чистом JS код становится проще. Регистрируем переход CSS для каждого слайда с определённой длительности:

.slide < transition: opacity 3s linear; /* 3 секунды = 3000 миллисекунд */ >

И код будет следующим:

(function() < function Slideshow( element ) < this.el = document.querySelector( element ); this.init(); >Slideshow.prototype = < init: function() < this.slides = this.el.querySelectorAll( ".slide" ); this.index = 0; // Курсор this.timer = null; // Таймер this.action(); this.stopStart(); >, _slideTo: function( slide ) < var currentSlide = this.slides[slide]; currentSlide.style.opacity = 1; for( var i = 0; i < this.slides.length; i++ ) < var slide = this.slides[i]; if( slide !== currentSlide ) < slide.style.opacity = 0; >> >, action: function() < var self = this; // Initializes the sequence self.timer = setInterval(function() < self.index++; // Увеличим курсор на 1 if( self.index == self.slides.length ) < self.index = 0; // Обнулим курсор >self._slideTo( self.index ); >, 3000); // Тот же интервал, что и у перехода CSS >, stopStart: function() < var self = this; // Останавливаем анимацию self.el.addEventListener( "mouseover", function() < clearInterval( self.timer ); self.timer = null; >, false); // Возобновляем анимацию self.el.addEventListener( "mouseout", function() < self.action(); >, false); > >; >)(); 

Примеры

Навигация с клавиатуры

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

Для этого мы обратимся к свойству keyCode объекта event. Оно возвращает код нажатой клавиши (список кодов).

Те события, что мы прикрепляли на кнопки «Предыдущий» и «Следующий», теперь можно прикрепить на клавиши «влево» и «вправо». jQuery :

$( "body" ).on( "keydown", function( e ) < var code = e.keyCode; if( code == 39 ) < // Стрелка влево $next.trigger( "click" ); >if( code == 37 ) < // Стрелка вправо $previous.trigger( "click" ); >>); 

На чистом JS вместо простого метода .trigger() придётся пользоваться dispatchEvent():

document.body.addEventListener( "keydown", function( e ) < var code = e.keyCode; var evt = new MouseEvent( "click" ); // нажатие мыши if( code == 39 ) < // Стрелка влево self.next.dispatchEvent( evt ); >if( code == 37 ) < // Стрелка вправо self.previous.dispatchEvent( evt ); >>, false); 

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

Примеры

Обратные вызовы

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

В jQuery можно создать обратный вызов так:

(function( $ ) < $.fn.slideshow = function( options ) < options = $.extend(< //. callback: function() <>>, options); var slideTo = function( slide, element ) < var $currentSlide = $( options.slides, element ).eq( slide ); $currentSlide. animate(< opacity: 1 >, options.speed, options.easing, // Обратный вызов для текущего слайда options.callback( $currentSlide ) ). siblings( options.slides ). css( "opacity", 0 ); >; //. >; >)( jQuery ); 

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

$(function() < $( "#main-slider" ).slideshow(< callback: function( slide ) < var $wrapper = slide.parent(); // Показывает текущую подпись и прячет остальные $wrapper.find( ".slide-caption" ).hide(); slide.find( ".slide-caption" ).show( "slow" ); >>); >); 

(function() < function Slideshow( element, callback ) < this.callback = callback || function() <>; // Our callback this.el = document.querySelector( element ); this.init(); > Slideshow.prototype = < init: function() < //. this.slides = this.el.querySelectorAll( ".slide" ); //. //. >, _slideTo: function( slide ) < var self = this; var currentSlide = self.slides[slide]; currentSlide.style.opacity = 1; for( var i = 0; i < self.slides.length; i++ ) < var slide = self.slides[i]; if( slide !== currentSlide ) < slide.style.opacity = 0; >> setTimeout( self.callback( currentSlide ), 500 ); // Вызывает функцию по окончанию перехода > >; // >)(); 

Функция обратного вызова определена как второй параметр конструктора. Использовать её можно так:

document.addEventListener( "DOMContentLoaded", function() < var slider = new Slideshow( "#main-slider", function( slide ) < var wrapper = slide.parentNode; // Показывает текущую подпись и прячет остальные var allSlides = wrapper.querySelectorAll( ".slide" ); var caption = slide.querySelector( ".slide-caption" ); caption.classList.add( "visible" ); for( var i = 0; i < allSlides.length; ++i ) < var sld = allSlides[i]; var cpt = sld.querySelector( ".slide-caption" ); if( sld !== slide ) < cpt.classList.remove( "visible" ); >> >); >); 

Примеры

Внешние API

Пока наш сценарий работы прост: все слайды уже есть в документе. Если нам надо вставлять в него данные снаружи (YouTube, Vimeo, Flickr), нам нужно на лету заполнять слайды по мере получения внешнего контента.

Так как ответ со стороннего сервера может быть не немедленным, надо вставлять анимацию загрузки, чтобы показать, что процесс идёт:

  
  Предыдущий Следующий 
 

Это может быть gif или анимация на чистом CSS:

#spinner < border-radius: 50%; border: 2px solid #000; height: 80px; width: 80px; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; >#spinner:after < content: ''; position: absolute; background-color: #000; top:2px; left: 48%; height: 38px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 97%; transform-origin: 50% 97%; -webkit-animation: angular 1s linear infinite; animation: angular 1s linear infinite; >@-webkit-keyframes angular < 0%100% > @keyframes angular < 0%100% > #spinner:before < content: ''; position: absolute; background-color: #000; top:6px; left: 48%; height: 35px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 94%; transform-origin: 50% 94%; -webkit-animation: ptangular 6s linear infinite; animation: ptangular 6s linear infinite; >@-webkit-keyframes ptangular < 0%100% > @keyframes ptangular < 0%100% > 

Шаги будут такие:
— запросить данные извне
— спрятать загрузчик
— разобрать данные
— построить HTML
— вывести слайд-шоу
— обрабатывать слайд-шоу

Допустим, мы выбираем самые свежие видео пользователя с YouTube. jQuery:

(function( $ ) < $.fn.slideshow = function( options ) < options = $.extend(< wrapper: ".slider-wrapper", //. loader: "#spinner", //. limit: 5, username: "learncodeacademy" >, options); //. var getVideos = function() < // Получить видео с YouTube var ytURL = "https://gdata.youtube.com/feeds/api/videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON( ytURL, function( videos ) < // Получаем видео как объект JSON $( options.loader ).hide(); // Прячем загрузчик var entries = videos.feed.entry; var html = ""; for( var i = 0; i < entries.length; ++i ) < // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace( "http://gdata.youtube.com/feeds/api/videos/", "" ); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html + ; html += " "; html + ; >$( options.wrapper ).html( html ); // Выведем слайд-шоу >); >; return this.each(function() < //. getVideos(); // Обрабатываем слайд-шоу >); >; >)( jQuery ); 

На чистом JavaScript есть лишний шаг – создание метода получения JSON:

(function() < function Slideshow( element ) < this.el = document.querySelector( element ); this.init(); >Slideshow.prototype = < init: function() < this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.loader = this.el.querySelector( "#spinner" ); //. this.limit = 5; this.username = "learncodeacademy"; >, _getJSON: function( url, callback ) < callback = callback || function() <>; var request = new XMLHttpRequest(); request.open( "GET", url, true ); request.send( null ); request.onreadystatechange = function() < if ( request.status == 200 && request.readyState == 4 ) < var data = JSON.parse( request.responseText ); // JSON object callback( data ); >else < console.log( request.status ); >>; >, //. >; >)(); 

Затем процедуры получаются схожие:

(function() < function Slideshow( element ) < this.el = document.querySelector( element ); this.init(); >Slideshow.prototype = < init: function() < this.wrapper = this.el.querySelector( ".slider-wrapper" ); this.loader = this.el.querySelector( "#spinner" ); //. this.limit = 5; this.username = "learncodeacademy"; this.actions(); >, _getJSON: function( url, callback ) < callback = callback || function() <>; var request = new XMLHttpRequest(); request.open( "GET", url, true ); request.send( null ); request.onreadystatechange = function() < if ( request.status == 200 && request.readyState == 4 ) < var data = JSON.parse( request.responseText ); // JSON object callback( data ); >else < console.log( request.status ); >>; >, //. getVideos: function() < var self = this; // Получить видео YouTube var ytURL = "https://gdata.youtube.com/feeds/api/videos?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON( ytURL, function( videos ) < // Получаем видео как объект JSON var entries = videos.feed.entry; var html = ""; self.loader.style.display = "none"; // Прячем загрузчик for( var i = 0; i < entries.length; ++i ) < // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace( "http://gdata.youtube.com/feeds/api/videos/", "" ); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html + ; html += " "; html + ; >self.wrapper.innerHTML = html; // Выводим слайд-шоу >); >, actions: function() < var self = this; self.getVideos(); // Обрабатываем слайд-шоу >>; >)(); 

Примеры

Заключение

Слайд-шоу – интересная возможность улучшить пользовательский опыт. Если не перебарщивать с ними, они позволят пользователю быстро найти нужный контент на сайте всего за несколько кликов. Также слайд-шоу навроде Revolution Slider или Nivo Slider демонстрируют, как можно обогатить визуальную составляющую сайта. Но для построения таких сложных проектов сначала необходимо разобраться с основами.

Слайд-шоу

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

Использование

элемент и разместить изображения внутри элементов списка. Для того чтобы загрузить необходимые JavaScript, необходимо также добавить data-uk-slideshow атрибут.

Пример

• 
• 
• 

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

Разметки

Навигационные кнопки

Для навигации по слайдам, просто используйте data-uk-slideshow-item атрибут. На целевые слайды, вам нужно задать данные атрибута каждого элемента навигации на номер соответствующего слайд-шоу пункт. Элементы с data-uk-slideshow-item атрибут надо быть внутри data-uk-slideshow контейнер.

Разметки

Установка атрибута next и previous переключится на соседних слайдах.

Разметки

Slidenav и Dotnav

Гибкость слайд-шоу компонент позволяет вам использовать любой другой UIkit компоненты для навигации по пунктам. Например Slidenav и Dotnav может быть использован для применения стиля к слайд-шоу навигаций как вы можете увидеть ниже.

Пример

• 
• 
• 

• Пункт 1
• Пункт 2
• Пункт 3

Разметки

Переходы

Компонент слайд-шоу позволяет добавлять различные элементы анимации при переключении между ними. Все, что вам нужно сделать, это добавить animation параметр в Data-атрибут и выбрать анимацию, которую требуется применить. Проверьте в таблице ниже представлены анимации обеспечены.

Класс	Описание
fade	Этот пункт исчезает.
scroll	Предметы в свиток.
scale	Детали масштабирования на выход.
swipe	Предметы проведите.

Чтобы применить эти более продвинутые переходы, в slideshow-fx.js файл должен быть включен в Head документа.

Класс	Описание
slice-down	Предметы скольжение вниз в ломтики.
slice-up	Элементы скольжения в ломтики.
slice-up-down	Нарезанные элементы скольжения в alterning направлениях.
fold	Предметы сложены в.
puzzle	Элементы разделены на квадраты, которые случайным образом исчезают.
boxes	Элементы разделены на квадраты, которые в масштабе по диагонали из верхнего левого угла.
boxes-reverse	Элементы разделены на квадраты, которые в масштабе по диагонали из Нижнего правого угла.
random-fx	Разные анимации применяются в случайном порядке.

Пример

Свиток

• 
• 
• 

Масштаб

• 
• 
• 

Салфетки

• 
• 
• 

Ломтик Вниз

• 
• 
• 

Нарезать

• 
• 
• 

Ломтик Вверх Вниз

• 
• 
• 

Фолд

• 
• 
• 

Головоломки

• 
• 
• 

Коробки

• 
• 
• 

Коробки Реверса

• 
• 
• 

Разметки

Эффект Кена Бернса

Эффект Кена Бернса, может также применяться в слайд-шоу элементы. Просто добавить опция для данных атрибутов. Этот эффект также может быть применен к видео.

Пример

• 
• 
• 

Разметки

Custom animation duration:

Полноэкранное слайд-шоу

Для создания полноэкранного слайд-шоу, который растягивается, чтобы заполнить всю область просмотра, просто добавьте .uk-slideshow-fullscreen класс.

Разметки

Накладки

Вы также можете добавлять на слайд-шоу с различными накладками. Просто добавить .uk-overlay-panel К элемент внутри элемента списка. Также добавить .uk-overlay-background и .uk-overlay-fade показать фон и переход. Чтобы переключить режим наложения однажды слайд становится активным добавьте .uk-overlay-active к списку контейнера. Дополнительные параметры, проверьте Наложение компонент.

Пример

• 

Наложение

Компания Ipsum боль сидеть амет, consetetur sadipscing elitr,
СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam. Кнопка

Наложение Верхней

Компания Ipsum боль сидеть амет, consetetur sadipscing elitr, СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam. Кнопка

Наложение Дно

Компания Ipsum боль сидеть амет, consetetur sadipscing elitr, СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam. Кнопка

Наложение Левой

Компания Ipsum боль сидеть амет, consetetur sadipscing elitr, СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam. Кнопка

Право Наложения

Компания Ipsum боль сидеть амет, consetetur sadipscing elitr, СЭД диам nonumy eirmod tempor invidunt ут ет лаборе женский боль магна aliquyam. Кнопка

Разметки

  
.

Видео

UIkit позволяет представить оба видео-элементов и фреймов в слайд-шоу.

Пример

Разметки

Содержание

Вы в принципе можете вставить любой контент, например текст или всего грид Как слайд-шоу элементов.

Пример

Заголовок 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Подробнее

Заголовок 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Подробнее

Инициализации элементов вручную

var slideshow = UIkit.slideshow(element, < /* options */ >);

JavaScript варианты

Вариант	По умолчанию	Описание
animation	‘fade’	Определяет предпочтительный переход между элементами.
duration	500	Определяет Длительность перехода.
height	‘auto’	Определяет высоту слайд-шоу.
start	0	Определяет первое слайд-шоу отображаемого элемента.
autoplay	false	Определяет, будет ли слайд-шоу элементы должны переключаться автоматически.
pauseOnHover	true	Пауза автозапуск при наведении на слайд-шоу.
autoplayInterval	7000	Определяет промежуток времени между переключением слайдов элементов.
videoautoplay	true	Определяет, является ли или не видео начинается автоматически.
videomute	true	Определяет, является ли или не видео отключается.
kenburns	false	Определяет, может ли эффект Кена Бернса является активным. Если kenburns — числовое значение, оно будет использоваться как Длительность анимации.
kenburnsanimations	‘uk-animation-middle-left’, ‘uk-animation-top-right’, ‘uk-animation-bottom-left’, ‘uk-animation-top-center’, ‘uk-animation-bottom-right’	Анимационный сериал.
slices	15	Определяет количество срезов, если «срез» переход установлен.

События

Название	Параметр	Описание
show.uk.slideshow	event, next slide, current slide	На показ нового слайда (после того, как анимация закончится)
beforeshow.uk.slideshow	event, next slide, current slide	Перед выводом нового слайда (до того, как анимация закончится)

Сделанное YOOtheme С любовью и кофеином.
под лицензией MIT.