Блог geloni-el. Linux, программирование, математика.

Skitter безумно красивый слайдер на jQuery.

С 26 видами эффектов смены картинки: cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, random, randomSmart.

С двумя типами загрузки xml и html.

С тремя видами навигации: Номерная(Numbers), Миниатюрками(Thumbs) и кружками(Dots).

Подключение Skitter и нужных плагинов.

<pre>
<ol>
<li>// Styles</li>

<li><link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" /></li>

<li>// Scripts</li>

<li><script src="js/jquery-1.5.2.min.js"></script></li>

<li><script src="js/jquery.skitter.min.js"></script></li>

<li><script src="js/jquery.easing.1.3.js"></script></li>

<li><script src="js/jquery.animate-colors-min.js"></script></li>

</ol>

</pre>

Запускаем функцию.

$(function(){
$('.class').skitter();
});

Html

<pre>
<li><div class="box_skitter box_skitter_large"></li>

<li>    <ul></li>

<li>        <li></li>

<li>            <a href="http://thiagosf.net"><img src="images/01.jpg" class="block" /></a></li>

<li>            <div class="label_text"></li>

<li>                <p>Label</p></li>

<li>            </div></li>

<li>        </li></li>

<li>        <li></li>

<li>            <a href="http://cakephp.org"><img src="images/02.jpg" class="cube" /></a></li>

<li>            <div class="label_text"></li>

<li>                <p>Label</p></li>

<li>            </div></li>

<li>        </li></li>

<li>        <li></li>

<li>            <a href="http://jquery.com"><img src="images/03.jpg" class="default" /></a></li>

<li>            <div class="label_text"></li>

<li>                <p>Label</p></li>

<li>            </div></li>

<li>        </li></li>

<li>    </ul></li>

</pre>

Xml

<pre>
<ol>
<li><?xml version="1.0" encoding="utf-8"?></li>

<li><skitter></li>

<li>    <slide></li>

<li>        <link>#directionTop</link></li>

<li>        <image type="directionTop">images/001.jpg</image></li>

<li>        <label><![CDATA[<p>directionTop</p>]]></label></li>

<li>    </slide></li>

<li>    <slide></li>

<li>        <link>#cubeSize</link></li>

<li>        <image type="cubeSize">images/002.jpg</image></li>

<li>        <label><![CDATA[<p>cubeSize</p>]]></label></li>

<li>    </slide></li>

<li>    <slide></li>

<li>        <link>#paralell</link></li>

<li>        <image type="paralell">images/003.jpg</image></li>

<li>        <label><![CDATA[<p>paralell</p>]]></label></li>

<li>    </slide></li>

<li></skitter></li>

</ol>

</pre>

Демо
Скачать