Justy Slider


07.09.2014 12:552817

Justy Slider - это слайдер для плавного листания различных блоков. Например изображений, или текста. Возможно каких-нибудь виджетов.
Для того чтобы подключить его на сайт нужно сделать следующее:

 

  • Скопировать стили из файла style.css архива в ваш файл стилей, скорректировав пути.
  • Скопировать содержимое папки js в вашу папку js на сайте.
  • Подключить все скрипты перед закрывающим </head>, соблюдая правильность пути.


если к сайту подключен jquery, то 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

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

Слайдер Justy Slider - это вариант на базе слайдера Coda-Slider, который также использует jQuery Easing. Добавлены спецэффекты для миниатюр, активная миниатюра проворачивается на 360 градусов, и становится подсвеченной цветом похожим на неон. Для примера в первом блоке выведен обычный вариант - изображение и текст, во втором - через iframe подключен другой html файл, в третий блок выведен js виджет и текст, в четвертый просто текст. 

Таким образом в Justy Slider можно выводить различные виды контента, изображения, виджеты, блоки социальный сетей, видео, и тд. 

Для добавления новых блоков в слайдер - нужно создать div с классом panel и внутри размещать нужный контент, например для вывода iframe код блока выглядит так:

<div class="panel">
    	<p class="panel-data">Тестируем iframe</p>
    	<iframe src="testiframe.html" style="width: 100%;height: 100%;border: 0;"></iframe>
</div>


Чтобы появилась миниатюра, нужно найти контейнер для миниатюр:

 

 <div id="miniblock">  ....................	</div>

и перед 

 

<div id="clrdiv"></div>

вставить :

<div><a href="#5" class="cross-link"><img src="images/5.jpg" class="nav-thumb" alt="ваша миниатюра" /></a></div>


где #5 это порядковый номер, и все последующие будут на 1 больше. images/5.jpg - условно, можете называть как угодно, это вызов миниатюры к блоку который вы добавили.

Теперь остается изменить цифру в параметре curclicked, который указывает после какого блока возвращаться. Поэтому если изначально у нас 4 блока, то и параметр = 4, добавите еще 3, значит параметр будет 7.
Находится он в районе 17 строчки сверху, в head. Там же после запятой число, отвечающее за скорость прокрутки, сейчас оно 3700, если нужно, измените на свое усмотрение

if(4==curclicked)curclicked=0},3700)

Внешний вид настраивается в файле стилей.

 

 



Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Justy , Slider , Слайдер





«Justy Slider» - Похожие страницы

Нет записей


Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям