Главная » Файлы » Прочие скрипты » jQuery

StackSlider - 3D слайддер изображений для вашего сайта
24.06.14, 14:18:33

Скачать файл




StackSlider является экспериментальным JQuery плагином для слайдера изображений, который дает различные концепции просмотра эскизов, используя CSS 3D преобразования. Идея состоит в том, чтобы создать два стека в виде груды изображений, где переходы изображений выглядят так: следующее изображение якобы отрывается от своего стека и с разворачивающимся 3d эффектом перемещается в центр слайдера в то время, как ранее просматриваемое изображение падает на противоположный стек.

Обратите внимание, что этот плагин полностью не проверен на кросс-браузерность. И, очевидно, 3D-эффект работает только в поддерживающих его браузерах. Иначе, при навигации будет производится просто отображение и скрытие изображения без 3d эффектов.

Заценим ДЕМО к материалу.

Для использования плагина, нам понадобится неупорядоченный список со следующие структурой:
Код
<ul id="st-stack" class="st-stack-raw">  
<li>  
<div class="st-item">  
<a href="ссылка изображения">  
<img src="images/1.jpg" />  
</a>  
</div>  
<div class="st-title">  
<h2>Комментарий </h2><h3>к изображению</h3>  
</div>  
</li>  
<li> <!-- ... --> </li>  
<li> <!-- ... --> </li>  
<li> <!-- ... --> </li>  
<!-- ... -->  
  </ul>


Класс “st-stack-raw” используется только, чтобы скрыть список, когда js включен.

Плагин вызываем так:
Код
$( '#st-stack' ).stackslider();


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

Опции

По умолчанию установлены следующие параметры:
Код
// По умолчанию скорость перехода слайда  
  speed : 700,  
  // По умолчанию переход смягчения  
  easing : 'ease-in-out',  
  piles : true


Js файлы в архиве, подключите сами я думаю smile
Стили определены в файле style.css

Либо же

Между тегами head & /head вставляем:
Код
<link rel="stylesheet" type="text/css" href="css/style.css" />  
<script src="js/modernizr.custom.63321.js"></script>  
<!--[if lte IE 7]><style>.support-note .note-ie{display:block;}</style><![endif]-->


Перед тегом /body ставим:
Код
<script type="text/javascript" src="js/jquery.stackslider.js"></script>  
<script type="text/javascript">  
$( function() {  
$( '#st-stack' ).stackslider();  
});  
</script>


Структура слайдера возьмете выше ↑ .

Не даю гарантий, что будет работать на uCoz'e так, как нужна библиотека jQuery версии 1.8.3 , можно попробовать подключить самостоятельно:
Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


На этом все! Из прикрепленного архива заливаем файлы в соответствующие папки! Спасибо за внимание smile

Категория: jQuery | Добавил: Apocalypse | Теги: изображений, слайддер, Вашего, StackSlider, сайта, для, 3D
Просмотров: 286 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: