Автор

19 04.2013
Удивительный слайдер контента для сайта

Удивительный слайдер контента для сайта


 

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

 

ДЕМО
ИСХОДНИКИ

 

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


Шаг 1. HTML

 

Нам необходимо подключить стили и плагины слайдера:

<link rel="stylesheet" href="iview.css" type="text/css" media="screen" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="raphael-min.js" type="text/javascript"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script src="iview.packed.js" type="text/javascript"></script>

Теперь мы создаем простой каркас с изображениями:

<div id="iview">
 <!-- Слайд 1 -->
 <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>
 <!-- Слайд 2 -->
 <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div>
</div>

Нам необходимо создать подписи к изображениям, для этого мы будем использовать класс "iview-caption":

<div id="iview">
 <!-- Слайдер 1 -->
 <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg">
 <!-- Описание -->
 <div class="iview-caption" data-x="0" data-y="0" data-width="400" data-height="300" data-transition="wipeRight" data-speed="700"><h3>Адаптивный слайдер</h3></div>
 </div>
 <!-- Слайдер 2 -->
 <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg">
 <!-- Описание -->
 <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Приятно вас удивит</div>
 </div>
</div>

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

<div data-iview:image="photos/photo.jpg">
 <!-- Видео iFrame -->
 <iframe src="http://путь к видео" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

 <!-- Описание -->
 <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Новый клип</div>
</div>

Данный сценарий необходимо инициализировать с помощью функции $(document).ready():

<script type="text/javascript">
$(document).ready(function() {
 $('#slider').iView();
});
</script>

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

 





 

 

Шаг 2. JavaScript

 

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

$('#slider').trigger('iView:pause'); //Пауза
$('#slider').trigger('iView:play'); //Старт

Перейти на нужный слайд:

$('#slider').trigger('iView:goSlide', [2]); // Перейти на слайд 2

Кнопки "Назад" и "Вперед":

$('#slider').trigger('iView:previous'); //Назад
$('#slider').trigger('iView:next'); //Вперед

Устанавливаем рондомный вывод слайда:

var total = $('#slider').children().length;
var rand = Math.floor(Math.random()*total);
$('#slider').iView({
 startSlide:rand
});

 

Опции

 

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

<script type="text/javascript">
$(document).ready(function() {
 $('#slider').iView({
 strips: 20, // Количество полос для волны анимации
 blockCols: 10, // Количество столбцов для блока анимации
 blockRows: 5, // Количество строк для блока анимации
 captionSpeed: 500, //Скорость перехода подписей
 captionEasing: 'easeInOutSine', // Эффект сглаживания
 captionOpacity: 1, // 3аголовок непрозрачности
 animationSpeed: 500, // Скорость перехода
 pauseTime: 5000, // Как долго каждый слайд отображается
 startSlide: 0, // Установить, начиная слайдов (0 index)
 directionNav: true, // Вперед и Назад
 directionNavHoverOpacity: 0.6, // Fade при наведении
 controlNav: true, // 1,2,3,4... Навигация
 controlNavNextPrev: true, // previous,next navigation
 controlNavHoverOpacity: 0.6, // Навигация для Вперед и Назад
 controlNavThumbs: false, // Показать кнопки навигации
 controlNavTooltip: true, // Показать подписи для изображений
 autoAdvance: true, // Автопереход
 keyboardNav: true, // Использовать левую и правую стрелки
 touchNav: true, // Использование сенсорного дисплея, чтобы изменить слайды
 pauseOnHover: false, // Остановить слайды при наведении
 nextLabel: "Next", // Устанавливаем следующую кнопку (Multilanguage )
 previousLabel: "Previous", // Устанавливаем предыдущую кнопку (Multilanguage use)
 playLabel: "Play", //Кнопка воспроизведения (Multilanguage use)
 pauseLabel: "Pause", // Кнопка паузы (Multilanguage use)
 closeLabel: "Close", // Кнопка закрытия (Multilanguage use)
 randomStart: false, // Случайный слайд
 timer: 'Pie', // Строка процеса: "Pie", "360Bar" or "Bar"
 timerBg: '#000', // Фоновый таймер
 timerColor: '#EEE', // Цветной таймер
 timerOpacity: 0.5, // Оптический таймер
 timerDiameter: 30, // Таймер окружный
 timerPadding: 4, // Таймер полосы
 timerStroke: 3, // Таймер обычный
 timerBarStroke: 1, // Таймер с полоской
 timerBarStrokeColor: '#EEE', // Цвет полосы таймера
 timerBarStrokeStyle: 'solid', // Дополнительный цвет таймера
 timerX: 10, // Позиция таймера по оси Х
 timerY: 10, // Позиция таймера по оси Y
 onBeforeChange: function(){}, // Триггеры до перехода между слайдами
 onAfterChange: function(){}, // Триггеры перехода между слайдами
 onSlideshowEnd: function(){}, // Триггеры после всех слайдов
 });
});
</script>

 

Слайдер включает в себя 35 эффектов перехода, которые полностью настраиваются и совместимы со всеми основными браузерами (включая IE6 в IE9, Firefox, Chrome, Opera, Safari) и мобильные платформы, такие как IOS / Android.


Вот и все. Готово!

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

29 09.2014
Удивительный слайдер контента для сайта

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


02 04.2013
Удивительный слайдер контента для сайта

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


28 11.2014
Удивительный слайдер контента для сайта

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


17 01.2017
Удивительный слайдер контента для сайта

Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем jQuery плагин Lazy Load.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close