jQuery MySlider v.1.3

http://wdevblog.net.ru/
https://bitbucket.org/andchir/myslider/src

Slider with animation effects (jQuery UI) and the ability to work with both JSON, and the data in 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>

Example 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>

Example 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:1000" 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>

Options

Option	Description	Default value
slider_width (integer)	Slider width.	700
slider_height (integer)	Slider height.	250
direction (string)	The direction of motion slides. vertical | horizontal	horizontal
autoPlay (boolean)	Auto play.	true
delay (integer)	Slides with autoscroll delay in seconds.	6
showArrows (boolean)	Show arrows.	true
reverseAnimation (boolean)	Animation layers in reverse order (the last one).	false
items (arrow)	Array data slide. Not required.

Effects

Effects can be specified for layers using the attribute data-effect. Example:

<div data-effect="fade">Layer</div>

You can specify the time playback effect (speed) in milliseconds:

<div data-effect="fade:1000">Layer</div>

Complete list of effects:

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, scale, pulsate

Available methods

Next slide:

$.mySlider.next();

Next slide, if the page have several sliders:

$('#container_id').mySlider('next');

Previous slide:

$('#container_id').mySlider('prev');

Going to slide index (from zero):

$('#container_id').mySlider('slideTo',1);