Здесь есть несколько доступных опций, включая даже определения области распространения элементов при навигации, определения скорости (CSS transitions), добавления пользовательской навигации и так далее.
Для браузеров, которые не поддерживают CSS 3D transforms и transitions, предоставляется запасной вариант, то есть обычная навигация, состоящая из пунктов (появляется/исчезает).
Для того чтобы использовать этот плагин, вам потребуется неупорядоченный список с классом wi-container:
<ul id="wi-el" class="wi-container">
<li>
<img src="images/demo1/1.jpg" alt="image1"/>
<h4>Coco Loko</h4>
<p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
</li>
<li> <!-- ... --> </li>
<li> <!-- ... --> </li>
<li> <!-- ... --> </li>
<!-- ... -->
</ul>
Плагин можно запускать следующим образом:
$( '#wi-el' ).windy();
Опции
Доступны следующие опции:
$.Windy.defaults = {
// если нам нужно указать селектор, который запускает функцию next(). Например: '#wi-nav-next'.
nextEl : '',
// если нам нужно указать селектор, который запускает функцию prev().
prevEl : '',
// вращение и преобразование границ для перемещения объектов.
boundaries : {
rotateX : { min : 40 , max : 90 },
rotateY : { min : -15 , max : 15 },
rotateZ : { min : -10 , max : 10 },
translateX : { min : -200 , max : 200 },
translateY : { min : -400 , max : -200 },
translateZ : { min : 250 , max : 550 }
}
};
Границы определяют значения для рассеивания или «вылета» объектов. Плагин будет случайным образом выбирать значение между указанными значениями.
Следующие общие методы доступны для использования в комбинации с элементами навигации:
* next()
* prev()
* navigate(position)
Если вам хотелось бы увидеть больше примеров использования элементов навигации, то просмотрите демо, где используются стрелки и слайдер из jQuery UI.
CSS-анимация и основное оформление определены в файле windy.css.
Ознакомьтесь с этими демо, где используются различные настройки:
Демо 1: стандартные границы с навигационными стрелками
Демо 2: расширенные границы с навигационными стрелками
Демо 3: суженные границы со слайдером из jQuery UI
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.