Главная страница » jQuery » Интересный вертикальный слайдер на jQuery

Интересный вертикальный слайдер на jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

При этом остальные секции становятся более прозрачными и сужаются. При навигации с помощью кнопок следующая секции сдвигается в основное положение. Также используется плагин jQuery Mousewheel (автор Brandon Aaron), который обеспечивает навигацию по слайдеру с помощью колесика мыши. Для начала нам необходимо подключить следующие скрипты:

1

2

3

4

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

<script type="text/javascript" src="js/jquery.vaccordion.js"></script>

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

Следующим этапом будет создание разметики для слайдера, которая содержит общий контейнер, навигационные элементы и контенеры для каждого слайда:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<div id="va-accordion" class="va-container">

<div class="va-nav">

<span class="va-nav-prev">Назад</span>

<span class="va-nav-next">Дальше</span>

</div>

<div class="va-wrapper">

<div class="va-slice va-slice-1">

<h3 class="va-title">Маркетинг</h3>

<div class="va-content">

<p>Женя Ватсонов</p>

<ul>

<li><a href="#">Кто такой</a></li>

<li><a href="#">Портфолио</a></li>

<li><a href="#">Контакт</a></li>

</ul>

</div>

</div>

<div class="va-slice va-slice-2">

. . .

</div>

</div>

. . .

</div>

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

1

2

3

4

5

6

$('#va-accordion').vaccordion({

expandedHeight : 350,

animSpeed : 400,

animOpacity : 0.7,

visibleSlices : 2

});

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

// ширина аккордеона

accordionW : 1000,

// высота аккордеона

accordionH : 450,

// количество видимых слайдов

visibleSlices : 3,

// высота открытого слайда,

// не должна превышать высоты аккордеона

expandedHeight : 350,

// скорость открытия / закрытия слайда

animSpeed : 250,

// эффект, используемый при открытии / закрытии слайда

animEasing : 'jswing',

// значение непрозрачности для сжатых слайдов

animOpacity : 0.2,

// время затухания содержания слайда

contentAnimSpeed: 900,

// если данная опция имеет значение false,

// все открытие слайды будут сворачиваться перед перемещением

savePositions : true

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

Читайте также:

JQuery, Веб-мастеру, галерея картинок, Плагины, Ротатор контента

Опубликовал Cooper 29.04.2012 в 20:34, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.