smSlider

smSlider — слайдер для веба.
Весит примерно 3 kb

Использует jQuery и может расширять анимацию с jQuery Easing.

Примеры

Установка

1. Приаттачить на страницу jQuery и файлы из архива:

<link type="text/css"  rel="stylesheet" href="smslider/css/smslider.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="smslider/jquery.sm.slider.min.js"></script>

2. Подготовить html:

<div id="sm_slider">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

3. Запустить слайдер:

$(document).ready(function(){
    $('#sm_slider').smSlider()
})

API

Следующие настройки можно переопределять:

+

start Number

стартовый слайд

$elem.smSlider({
    start : 0
});

значение по умолчанию: 0

+

transition String

тип анимации смены слайда

$elem.smSlider({
    transition : 'animate'
});

значения: 'animate' | 'fader'

+

activeClass String

css-класс для текущего слайда и контролов навигации

$elem.smSlider({
    activeClass : 'active'
});

значение по умолчанию: 'active'

+

autoArr Boolean

автоматическая генерация контролов — стрелок на предыдущий и следующий слайды

$elem.smSlider({
    autoArr : true
});
+

typeCtrl String

контролы навигации — айфоновские точки или номера слайдов

$elem.smSlider({
    typeCtrl : 'dots'
});

по умолчанию: dots — айфоновские точки | numeric — нумерация

+

autoPlay Boolean

автоматическая смена слайдов через заданный промежуток

$elem.smSlider({
    autoPlay : true
});

по умолчанию: false

+

duration Number

Скорость анимации

$elem.smSlider({
    duration : 600
});

по умолчанию: 600

+

delay Number

задержка между автомаческой сменой слайдов

$elem.smSlider({
    delay : 5000
});

по умолчанию: 5000, то есть 5 секунд

+

hoverPause Boolean

включение паузы при наведении курсора на слайд во время автоматическоцй смены слайдов

$elem.smSlider({
    hoverPause : false
});

по умолчанию: true

+

easing String

тип анимации

$elem.smSlider({
    easing : 'swing'
});

значения: 'swing', 'linear' (расширяется с jQuery easing)

+

flexible Boolean

ширина в процентах

$elem.smSlider({
    flexible : true
});

по умолчанию: false

+

animationStart Function

пользовательская функция, стартует вместе с анимацией

$elem.smSlider({
    animationStart : function() {
        //do something
    }
});
+

animationComplete Function

пользовательская функция, стартует после завершения анимации

$elem.smSlider({
    animationComplete : function() {
        //do something
    }
});

Комбинируются настройки так:

$elem.smSlider({
    duration       : 500,
    autoPlay       : true,
    delay          : 8000,
    subMenu        : true,
    subMenuClass   : 'more-item',
    animationStart : function(toIndex){
        //do something
    },
    animationComplete : function(toIndex){
        //do something
    }
});