Как создать слайдер изображений или слайд-шоу

Меню

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена ​​боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок

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

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.min.css">
<!-- Подключаем JS слайдера -->
<script defer src="simple-adaptive-slider.js"></script>

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

<!-- Разметка слайдера (html код) -->
<div class="slider">
  <div class="slider__wrapper">
    <div class="slider__items">
      <div class="slider__item">
        <!-- Контент 1 слайда -->
      </div>
      <div class="slider__item">
        <!-- Контент 2 слайда -->
      </div>
      <div class="slider__item">
        <!-- Контент 3 слайда -->
      </div>
      <div class="slider__item">
        <!-- Контент 4 слайда -->
      </div>
    </div>
  </div>
  <!-- Стрелки для перехода к предыдущему и следующему слайду -->
  <a class="slider__control slider__control_prev" href="#" role="button" data-slide="prev"></a>
  <a class="slider__control slider__control_next" href="#" role="button" data-slide="next"></a>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

.slider__indicators {
  display: none;
}

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

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

CSS

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

/* Слайдер */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* анимация css3 */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* Задержки css3 */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* Анимация css3 */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

CSS:

.sl-container {
width: 100%;
height: 500px;
margin: 20px 0;
padding: 0;
font-family: ‘Roboto Condensed’, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #000;
position: relative;
}
.swipe {
position: relative;
width: 100%;
height: 100%;
background: #eee;
overflow: hidden;
}
.panel {
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 0;
padding: 20px;
}
.left {
left: -100%;
}
.right {
left: 100%;
}
.sl-info {
position: absolute;
width: 70%;
max-width: 500px;
bottom: 15%;
right: 5%;
pointer-events: none;
}
.inner {
position: relative;
padding: 0.5em 2em 1em;
background: #FFFFFF;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.inner h3 {
font-size: 1.7em;
font-weight: normal;
color: #337AB7;
}
.inner p {
font-family: Verdana, sans-serif;
}
.sl-info:before {
content: «»;
position: absolute;
width: 65%;
height: 80%;
top: 0;
left: 0;
transform: translate(-10px, -10px);
background: #337AB7;
}
.sl-buttons {
position: absolute;
bottom: -50px;
right: 5%;
pointer-events: all;
}
.sl-buttons button {
transition: ease .4s;
}
.sl-buttons button svg {
margin: 10px 0;
}
.sl-buttons .btn-prev,
.sl-buttons .btn-next {
width: 60px;
height: 60px;
margin-left: 10px;
border: 2px solid #337AB7;
outline: none;
border-radius: 60px;
color: #FFFFFF;
background: #337AB7;
box-shadow: 0px 3px 15px 2px rgba(0,0,0,.5);
cursor: pointer;
}
.sl-buttons button:hover {
box-shadow: 0px 3px 30px 3px rgba(0,0,0,.5);
}
.sl-buttons button:disabled {
box-shadow: 0px 1px 5px 0px rgba(0,0,0,.5);
background: #BFE2FF;
cursor: default;
}
.optional {
width: 80%;
max-width: 680px;
margin: 6em auto;
padding: 2em 3em;
box-shadow:
0 3px 12px rgba(0,0,0,0.16),
0 3px 12px rgba(0,0,0,0.23);
}
@media (max-width: 620px) {
body {
font-size: 13px;
line-height: 1.5em;
}
.sl-info {
position: absolute;
width: 100%;
max-width: 100%;
bottom: 0;
right: 0;
}
.inner {
padding: .5em 1.5em;
box-shadow: none;
}
.sl-buttons {
display: none;
}
}

Шаг 6. Анимация

Мы будем анимировать свойство  background-position. Чтобы выводилось второе изображение свойство background-position должно иметь значение 33.33333% bottom, третье — 66.66667% bottom, а четвертое – 100% bottom. Первое изображение выводится при значении свойства background-position равном 0 bottom или 133.33333% bottom (мы устанавливаем для повторений значение repeat-x).

Каждое изображение имеет 25% от времени «славы». Первое выводится от 0 до 25%, второе — от 25% до 50%, третье — от 50% до 75%, а последнее — от 75% до 100%. Мы устанавливаем переходы так, чтобы изображение начинало выскальзывать немного раньше (используем значение 5%) прежде, чем истекут 25% его времени вывода. Вот так выглядит @keyframes:

@keyframes h_slide {
  0% {
    background-position: 0% bottom; }
  20% {
    background-position: 0% bottom; }
  25% {
    background-position: 33.33333% bottom; }
  45% {
    background-position: 33.33333% bottom; }
  50% {
    background-position: 66.66667% bottom; }
  70% {
    background-position: 66.66667% bottom; }
  75% {
    background-position: 100% bottom; }
  95% {
    background-position: 100% bottom; }
  100% {
    background-position: 133.33% bottom; } }

Обратите внимание, что нужно добавить префиксы браузеров: @-webkit-keyframes (для Chrome, Safari, iOS Safari, Android) и @-moz-keyframes (для Firefox 15). Ниже приводится полный код заголовка

Наша анимация “h_slide” повторяется каждые 24 с (6 с для каждого слайда) в бесконечном цикле. Функция времени имеет значение ease-out, так что каждый слайд замедляется в конце перехода

Ниже приводится полный код заголовка. Наша анимация “h_slide” повторяется каждые 24 с (6 с для каждого слайда) в бесконечном цикле. Функция времени имеет значение ease-out, так что каждый слайд замедляется в конце перехода.

header {
  text-align: center;
  position: relative;
  background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x;
  background-size: 400%;
  padding-bottom: 32.5%;
  -webkit-animation: h_slide 24s ease-out infinite;
  -moz-animation: h_slide 24s ease-out infinite;
  animation: h_slide 24s ease-out infinite; }

Вставляем простой jquery слайдер для сайта

Если вы не хотите возиться с HTML, CSS, JS, но хотите готовое решение из серии «все уже придумано до нас», то самое время подобрать jQuery слайдер.

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

Как установить jquery слайдер на сайт? Очень просто, вам нужно подключить файлы .js и .css — не забудьте загрузить их на хостинг, также пропишите корректный путь к jquery с сайта Google API.

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

Слайдер для сайта на Джумле (Joomla)

Что за Codecanyon? Это сайт-сборник платных дополнений для сайтов. Цены не кусаются и находятся в пределах от нескольких долларов до полутора десятков долларов. Разработчики скриптов для Codecanyon прилагают к своим решениям подробную документацию — как по настройке, так и по установке jquery слайдеров на сайт. Есть скриншоты и видео — все это станет вам доступным после оплаты выбранного скрипта.

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

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

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>

Описание слайдера и принципа его работы

ChiefSlider состоит из HTML, CSS и JavaScript кода.

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

<div class="slider">
  <div class="slider__wrapper">
    <div class="slider__items">
      <div class="slider__item">
        <!-- Контент 1 слайда -->
      </div>
      <div class="slider__item">
        <!-- Контент 2 слайда -->
      </div>
      <div class="slider__item">
        <!-- Контент 3 слайда -->
      </div>
    </div>
  </div>
  <!-- Кнопки -->
  <a href="#" class="slider__control" data-slide="prev"></a>
  <a href="#" class="slider__control" data-slide="next"></a>
</div>

Корневой элемент имеет класс .

В нём расположены:

• – выступает в качестве обёртки;
• – кнопки, для навигации по слайду (переход к предыдущим и следующим элементам).

Сдаиг слайдов в нужном направлении выполняется в JavaScript коде с помощью метода . Эта метод в зависимости от установленного свойства выполняет перемещение элемента в нужном направлении посредством CSS- трансформации.

Организация зацикленности слайдера выполняется также посредством CSS-трансформации, но не контейнера «», а уже самих элементов «».

Для того чтобы в коде можно было определить какой элемент нужно переместить, а какой не надо, к ним посредством JavaScript добавляются дополнительные data-атрибуты. Они содержат индекс слайда, его текущее положение и значение трансформации.

Добавление этих атрибутов при инициализации слайдера в коде реализовано так:

// $itemList – это элементы .slider__item
for (var i = 0, length = $itemList.length; i < length; i++) {
  $itemList.dataset.index = i;
  $itemList.dataset.order = i;
  $itemList.dataset.translate = 0;
}

Крайние индексы элементов, трансформаций и сами эти элементы в JavaScript хранятся в свойствах: , , , , и .

Обновление этих свойств осуществляется с помощью метода .

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

Автоматическая смена слайдов через определённые промежутки времени осуществляется с помощью функции . Она запускает метод через указанные интервалы времени, которые определяются значением свойства :

this._intervalId = setInterval(function() {
    this._direction = 'next';
    this._move();
  }.bind(this),
  this._config.interval
);

Остановка автоматической смены слайдов при поднесении к нему курсора осуществлена следующим образом:

function onMouseEnter(e) {
  this._autoplay('stop');
}
function onMouseLeave(e) {
  this._autoplay();
}
$root.addEventListener('mouseenter', onMouseEnter.bind(this)); $root.addEventListener('mouseleave', onMouseLeave.bind(this));

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

В коде это выполнено с использованием события следующим образом:

function onVisibilityChange() {
  if (document.visibilityState === 'hidden') {
    this._autoplay('stop');
  } else if (document.visibilityState === 'visible') {
    if (this._config.loop) {
      this._autoplay();
    }
  }
}
document.addEventListener('visibilitychange', onVisibilityChange.bind(this));

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

jQuery:

let mySlider = {
config : {
slider : ‘.slider-content’,
activeSlide : ‘.slide.active’,
button: ‘.next-button’,
transition: 800,
delay: function() {return this.transition;},
navigation : ‘.control-nav’
},
init : function(config) {
this.createNav();
$(mySlider.config.button).click(function() {
mySlider.animateSlide($(this));
});
},
getActiveSlide : function() {
return $(mySlider.config.activeSlide);
},
getNextSlide : function() {
let nextSlide = mySlider.getActiveSlide().next();
if ( nextSlide.length === 0 ){
nextSlide = $(mySlider.config.slider).find(‘.slide’).eq(0);
}
return nextSlide;
},
createNav : function() {
let totalSlides = $(mySlider.config.slider).find(‘.slide’).length;
let controlNav = $(mySlider.config.navigation).find(‘ul’);
let nav;
for( let i=0; i < totalSlides; i++ ){
let active = «»;
if(i === 0){
active = ‘active’;
}
controlNav.append(‘<li class=»slider-nav nav-‘+i+’ ‘+active+’ «>’+ (i+1) +'</li>’)
}
},
animateNav : function() {
let activeNav = $(‘li.active’);
let nextNav = activeNav.next();
if(nextNav.length === 0){
nextNav = $(‘.control-nav li’).eq(0);
}
activeNav.removeClass(‘active’);
nextNav.addClass(‘active’);
},
animateSlide : function(button) {
let activeSlide = mySlider.getActiveSlide();
let nextSlide = mySlider.getNextSlide();
let delay = mySlider.config.delay();
let clipPath = $(‘.clip-svg’);
clipPath.css(‘transition-duration’, mySlider.config.transition+’ms’);
button.css(‘pointer-events’, ‘none’);
nextSlide.css(‘z-index’,10);
nextSlide.addClass(‘active’).css(‘opacity’, 1);
setTimeout(function() {
activeSlide.removeClass(‘active’).css(‘opacity’, 0);
}, delay);
setTimeout(function() {
nextSlide.css(‘z-index’,»);
button.css(‘pointer-events’, ‘auto’);
}, delay + 300);
mySlider.animateNav();
}
}
$(document).ready(function() { mySlider.init(); });