Установка
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
});
+
prev String
css-класс контрола для перехода на предыдущий слайд
$elem.smSlider({
prev : 'sm_prev'
});
+
next String
css-класс контрола для перехода на следующий слайд
$elem.smSlider({
next : 'sm_next'
});
+
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
}
});