jQuery MySlider v.1.1

wdevblog.net.ru

Слайдер с анимационными эффектами (jQuery UI) и возможностью работы как с JSON, так и данными в HTML.

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.effects.min.js"></script>

<!-- MySlider -->
<link type="text/css" href="css/my_slider.css" rel="stylesheet" />
<script type="text/javascript" src="js/my_slider.js"></script>

Пример 1

<script type="text/javascript">
var slider_opts = {
    slider_width: 700,
    slider_height: 250,
    items: [
	[
	    {
		text: "Внимание! Акция!",
		link:"http://wdevblog.net.ru/",
		width: 331,
		height: 63,
		pos_left: 49,
		pos_top: 24,
		padding: 0,
		font: "bold 33px \"Trebuchet MS\", Helvetica, sans-serif",
		text_color: "#ffffff",
		effect: "puff"
	    },{
		width: 700,
		height: 250,
		pos_left: 0,
		pos_top: 0,
		padding: 10,
		background: "background:url(\"upload/1383326749.jpg\") no-repeat"
	    }
	]
    ]
};

$(document).bind('ready',function(){
    $('#my_slider').mySlider(slider_opts);
</script>

<div id="my_slider"></div>

Пример 2

<script type="text/javascript">
$(document).bind('ready',function(){
    $('#my_slider2').mySlider({
	slider_width:700,
	slider_height:400,
	direction:'vertical'
    });
});
</script>

<div id="my_slider2">
    <ul>
	<li>
	    <img src="upload/1383741229.jpg" alt="slide 1" />
	    <div data-effect="slide:left" style="position:absolute;left:20px;top:15px;font-size:35px;font-weight:bold;color:#F2B715;">Фотоальбом</div>
	</li>
	<li>
	    <img src="upload/1383741247.jpg" alt="slide 2" />
	</li>
	<li>
	    <img src="upload/1383741307.jpg" alt="slide 3" />
	</li>
	<li>
	    <img src="upload/1383741325.jpg" alt="slide 4" />
	</li>
    </ul>
</div>

Параметры

Параметр	Описание	Значение по умолчанию
slider_width (integer)	Ширина слайдера.	700
slider_height (integer)	Высота слайдера	250
direction (string)	Направление движения слайдов. vertical | horizontal	horizontal
autoPlay (boolean)	Авто прокрутка.	true
delay (integer)	Задержка слайдов при автопрокрутке в секундах.	6
showArrows (boolean)	Показывать стрелки.	true
items (arrow)	Массив с данными слайда. Не обязательно.

Эффекты

Эффекты можно указывать для слоев с помощью атрибута data-effect. Пример:

<div data-effect="fade">Слой</div>

Полный список эффектов:

fade, bounce, clip:vertical, clip:horizontal, blind:up, blind:down, blind:left, blind:right, fold, puff, slide:up, slide:down, slide:left, slide:right, shake, explode, pulsate

Доступные методы

Следующий слайд:

$.mySlider.next();

Следующий слайд в случае, если на странице несколько слайдеров:

$.mySlider.next(null, $('#my_slider2'));

Предыдущий слайд:

$.mySlider.prev();

Переход к слайду по индексу (от нуля):

$.mySlider.slideTo(null,1);