Делаем слайдер на JavaScript своими руками. Бесплатные скрипты слайд-шоу, галерей и лайтбоксов Обзор программ создания слайд-шоу

Главная / Телевизоры

Плагин для создания красивейших слайдеров - iView. Множество настроек, навигация, таймер, API, поддержка touch устройств, вставка видео и адаптивность.

04.03.2013 2 119

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

01.02.2013 1 415

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

23.11.2012 9 131

Отличный адаптивный jQuery слайдер - FlexSlider. Включает возможность навигации bullet (точками), позволяет использовать миниатюры вкупе с навигацией, возможность вставки видео в качестве слайда, опция карусели, а также плагин имеет небольшое API.

12.09.2012 5 885

Mobilyslider - простой плагин на jQuery весом всего 5Кб, при этом выглядит минималистично и стильно. Есть несколько дополнительных опции, в числе которых включение/отключение навигации, стрелок вперед/назад, авто слайдшоу, выбор вида перехода и др.

07.06.2012 1 880

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

09.05.2012 1 010

Слайдшоу на jQuery с музыкальным сопровождением с помощью кросс платформенной библиотеки jPlayer. Смена слайдов происходит в указанные промежутки музыкальной композиции.

04.05.2012 1 147

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

03.05.2012 2 501

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

12.04.2012 1 821

Используя jmpress, сделаем jquery плагин для создания слайдшоу с интересными 3D эффектами для слайдов.

Запретив использование JavaScript, Вы не сможете видеть интересные примеры слайд-шоу!

Слайд-шоу для сайта

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

И это не случайно!

**Примечание. В отличие от других страниц раздела jQuery , нужные скрипты прописал непосредственно в HTML-код самой этой страницы .
Кроме того, что очень важно(!) , они работают у меня от другой версии jQuery , более поздней, чем использую здесь.

Если там использую версию jquery v.1.10.1.min , то здесь v.1.8.3.min

Однако, подробнее об этом и обо всём остальном, по-порядку - дальше.

Подготовка слайд-шоу

Работа по созданию и установке слайд-шоу на сайте обычно состоит из 4-ёх основных этапов.

Подготовка изображений для слайдера

1. Подобрал фотографии. Главное - чтобы они были обязательно одного размера . Нужно их тщательно измерить.
В данном случае, взял готовые картинки из дополнительных материалов, приложенных к обучающему курсу. Какому? Об этом здесь: "Ссылки" (откроется в новом окне) .

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

Создание HTML+CSS каркаса для слайд-шоу

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

Разместил сами изображения внутри тэга p , для которого установил в стилях CSS ширину и высоту, и указал его class="slideshow" . А сам абзац с ними поместил внутрь общего тэга div , на фон которого повесил подготовленное графическое изображение слайдера (телевизор* ). Ему дал class="slider_fon" .
Причём, только для него , чтоб разгрузить страницу, подключил внешнюю таблицу стилей, а для рисунков всё делал внутри HTML-кода .

P.S.** Последнее действие вовсе НЕ обязательно. Просто, мне так удобнее. Структура страницы логичнее как-то выглядит.

В правилах CSS указал размер окна для изображений, которые потом будут появляться в слайдере (width - height ) . Естественно, у всех изображений должен быть одинаковый размер .
При желании, мог расширить CSS-параметры , добавив, скажем, рамки, фон, отступы и прочие элементы. Однако, думаю, это уже было бы лишним.

Если же, всё-таки, Вам захочется так сделать, то, размеры указывайте ОБЩИЕ , то есть: изображение + ВСЕ установленные отступы и границы .

Подключение скриптов

Рекомендую посетить справочную страницу , которую делал для себя во время изучения технологии jQuery. Очень поможет Вам разобраться.
Открыл к ней общий доступ: "ВЫБОРКА в jQuery" (откроется в новом окне) .

Как всегда, сначала создал папку js на сайте. Затем скачал нужные скрипты для слайд-шоу (архив ), и распаковал его в эту папку. В ней получилось два файла скриптов: ядро jquery-1.8.3.min.js и плагин jquery.cycle.all.min.js .

В неё же, на всякий случай, добавил и свой управляющий файл myscripts11.js . Однако, здесь он мне не пригодился для запуска и демонстрации слайд-шоу. Разве что, проверил им правильное подключение созданной папки.
Но... ..., пусть будет. Мало ли, что в дальнейшем захочу сделать с размещёнными здесь слайдерами. Короче, "... наш бронепоезд всегда на запасном пути" .

Дальше. Внутрь тэга ... вставил строчки, где прописал пути к скриптам. У меня они: , и к плагину: .
Свой ("запасной") управляющий файл закомментировал .

И последнее -

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

Ну вот! Слайд-шоу создано. Осталось настроить его параметры: скорость смены рисунков, способы их показа, и т.д..

Настройка параметров слайд-шоу

Как уже писал выше, (в примечании** ), нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
В созданном у себя на сайте слайд-шоу, применил настройки "по умолчанию" .

Вообще же, легко установить различные, интересные типы переходов между картинками, изменяя javascript , размещённый в теле страницы.
Скажем, изменив в скрипте строчку sync: false на sync: true , можно убрать пробел при смене изображений.

Важное замечание!
Разные версии jQuery могут конфликтовать друг с другом, если они на одной странице.
Обязательно(!) проверяйте работу плагинов с установленной версией jQuery , поскольку не все версии сочетаются!

Пример**
На других страницах раздела jQuery , использующих библиотеку, установлена версия jquery v.1.10.1.min . Так вот, она более современная, чем v.1.8.3.min , от которой исправно(!) работают слайдеры слайд-шоу здесь.

Плагин jquery.cycle.all.min.js с ней НЕ РАБОТАЕТ!!!
(проверено )

Впрочем, не огорчайтесь. Всё в Ваших руках!
В разделе моего сайта "Полезное" (откроется в новом окне) найдёте испытанный(!) полный комплект нужных скриптов для создания такого слайд-шоу на своём сайте. (Разумеется, БЕСПЛАТНО!)

Другие виды слайд-шоу

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

Если хотите разместить различные варианты слайд-шоу на одной странице сайта, как я это сделал здесь (увидите ниже ), указывайте разные классы для каждого варианта в строчке скрипта $(".slideshow ").cycle({

P.S.* Не забудьте прописать в CSS размеры окна для каждого класса , если, всё же, будете использовать таблицу стилей . Мне она не понадобилась.

Посмотрите сначала на неподвижные рисунки, которые, аналогично, взял из обучающего курса (Какого? Повторю ссылку: "Ссылки" ) , и разместил их здесь для сравнения.

Вот они. Будущие участники 7-ми слайд-шоу!
Смотрите их "выступление" ниже.

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

1. Растворение ("fade"): Аналогичен верхнему примеру с мотоциклами.
2. Перетасовывание ("shuffle"):
3. Зум ("zoom"):
4. Переворот по осям ("curtainX" или Y): Здесь установил "curtainX" .
5. Сворачивание по вертикали ("turnDown"): Здесь сворачивается вниз, а можно установить и другие виды переходов: turnUP, Left, Right .
6. Скроллинг ("scrollDown"): Смещение. Здесь установил вниз, а кроме этого можно устанавливать: scrollUp, Left, Right .

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

Presentation Cycle - вариация функционала Cycle. Вместо списка номеров слайдов, Presentation Cycle автоматически генерирует индикатор прогресса, который показывает время появления нового слайда.

Особенности

Циклический показ изображений.
Настраиваемое время анимации.
Генерация индикатора навигации, который отображает время показа слайда.
Работает в современных браузерах.

Как использовать скрипт

Подключаем к странице все необходимые библиотеки и скрипты:

Создаем контейнер, который содержит элементы для Cycle:

Заголовок

Контейнер с элементами цикла имеет id “presentation_container ”, что соответствует использованию установок по умолчанию в скрипте и таблице стилей. Вложенные элементы имеют класс “pc_item ”, что также соответствует использованию установок по умолчанию.

После контейнера вставляем вызов скрипта:

presentationCycle.init();

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

Настройки

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

Код Javascript в файле presentationCycle.js содержит следующую секцию, касающуюся изображений, используемых скриптом (строка 19 ):

// Опции индикатора прогресса barHeight: 14, // Высота полоски индикатора barDisplacement: 20, // Смещение индикатора barImgLeft: "images/pc_item_left.gif", // Изображение для левой части barImgRight: "images/pc_item_right.gif", // Изображение для правой части barImgCenter: "images/pc_item_center.gif", // Изображение для центральной части barImgBarEmpty: "images/pc_bar_empty.gif", // Изображение для пустой полоски barImgBarFull: "images/pc_bar_full.gif", // Изображение для заполненной полоски

Высота полоски определяется в пикселях. Она должна быть такой же как и высота изображений, которые хранятся в папке images . Изображения являются спрайтами, которые включают в себя версии для активного и пассивного состояния.

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

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

Cмещение индикатора barDisplacement комбинируется из отступа + поле полоски.

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

PresentationCycle.barHeight = 10; // Отличные от установок по умолчанию значения presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; presentationCycle.init(); // Запускаем скрипт

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

// Опции слайдов slideTimeout: 8000, containerId: "presentation_container", //Опции цикла cycleFx: "scrollHorz", cycleSpeed: 600,

slideTimeout - время демонстрации слайда.
containerId - контейнер с элементами цикла.
cycleFx - эффект перехода между слайдами, используются плагина Cycle . cycleSpeed - скорость анимации перехода между слайдами.

Всем привет. С вами Corvax. Сегодня я вам покажу как легко можно создать совой слайдер галереи фотографий на чистом javascript. Приступим.

В начале нам нужно будет создать структуру проекта. Вот пример:

Верстка HTML

В файле index.html нужно сверстать следующую структуру.

Стили CSS #gallery{ width: 400px; text-align: center; margin: 0 auto; } .photo{ position: relative; height: 300px; } .photo img{ width: 100%; position: absolute; opacity: 0; left: 0; transition: opacity 1s; } .photo img.shown{ opacity: 1; } .tabs{ text-align: center; padding-top: 20px; }

Основной момент на который тут стоит обратить внимание это то что мы по умолчанию делаем все картинки прозрачными (opacity: 0). И на класс shown добовляем свойство opacity: 1.

Добавляем JS var btn_prev = document.querySelector(".tabs .prev"), btn_next = document.querySelector(".tabs .next"); var images = document.querySelectorAll(".photo img"); var i = 0; btn_prev.onclick = function(){ images[i].className = ""; i = i - 1; if(i = images.length){ i = 0; } images[i].className = "shown"; };

Тут находится самая интересная часть. В начале мы инициализируем две кнопки на которые будем вешать события клика и набор фотографий (btn_prev, btn_next, images). После инициализации мы накидываем событие onclick на кнопки которые будут листать наш слайдер.

images[i].className = «»; тут мы убираем по клику класс shown со всех картинок.

i ++ (—) здесь мы будем при каждом клике менять индификатор слайда

if(i > = images.length){ i = 0; } (условие по клику на кнопку «вперед») это условие нам нужно что бы проверить когда будет выбран последний слайд. Если мы выбрали слайд который больше последнего то мы будем индификатору присваивать 0 (что автоматически поставит нас в начало набора).

if(i < 0){ i = images.length — 1; } (условие по клику на кнопку «назад») здесь если индификатор картники меньше 0 то индификатор будет равен последнему слайду -1 (т.к. массив у нас начинается с 0)

images[i].className = «shown»; тут мы добавляем класс shown на текущий активный слайд.

Заключение

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