| Главная » Файлы » Прочие скрипты » 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 файлы в архиве, подключите сами я думаю  Стили определены в файле 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> На этом все! Из прикрепленного архива заливаем файлы в соответствующие папки! Спасибо за внимание
| |
| Просмотров: 410 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |