UserQ,
вариант ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.wrapper {
width: 370px;
height: 120px;
border: 1px solid;
position: relative;
margin: 50px auto;
}
.wrapper ul:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.wrapper ul {
position: relative;
left: 0;
padding: 0;
width: 600px;
}
.wrapper ul li {
float: left;
width: 90px;
margin-right: 10px;
height: 90px;
list-style-type: none;
overflow: hidden;
}
.red {
background-color: red;
}
.slider {
overflow: hidden;
/* display: inline */
float: left;
width: 83%;
}
.black {
background-color: black;
}
.yellow {
background-color: yellow;
}
.wrapper a {
width: 20px;
height: 20px;
margin-top: 45px;
text-decoration: none;
}
.left {
margin-right: 10px;
margin-left: 10px;
float: left;
}
.right {
right: 5px;
float: right;
}
body {
margin: 0 auto;
}
</style>
<script>
$(window).load(function(){
(function($) {
var options = {
leftBtn: '.arrow-left',
rightBtn: '.arrow-right',
animationSpeed: 5,
};
var methods = {
init : function(options) {
var option = $.extend({
leftBtn: '.arrow-left',
rightBtn: '.arrow-right',
animationSpeed: 5
}, options);
var $leftArrow = $(option.leftBtn);
var $rightArrow = $(option.leftBtn);
$( '.arrow-left' ).bind( 'click', methods.left );
$( '.arrow-right').bind( 'click', methods.right );
},
left : function(event) {
event.preventDefault();
var $self = $('.arrow-left');
var $parent = $self.closest('.wrapper');
var $ul = $parent.find('ul');
var $first = $ul.find('li').first();
$first.clone().appendTo($ul);
$first.animate({width: 0, 'margin-left' : '-10px'}, 800, function() {
$first.remove();
});
},
right : function(event) {
event.preventDefault();
var $self = $('.arrow-right');
var $parent = $self.closest('.wrapper');
var $ul = $parent.find('ul');
var $first = $ul.find('li').last();
var clone = $first.clone().prependTo($ul);
$first.animate({width: 0}, 800, function() {
$first.remove();
});
clone.css({width: 0}).animate({width: '90px'}, 800)
},
destroy : function() {
$( '.arrow-left' ).unbind( 'click', methods.left );
$( '.arrow-right').unbind( 'click', methods.right );
}
};
$.fn.mySlider = function(method) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error(method + ' doesn\'t exist for plugin jQuery.mySlider' );
}
};
})( jQuery );
$('.wrapper').mySlider();
});
</script>
</head>
<body>
<div class="wrapper">
<a class="arrow-left left" href="#"><</a>
<div class=slider>
<ul>
<li class="red"></li>
<li class="black"></li>
<li class="yellow"></li>
</ul>
</div>
<a class="arrow-right right" href="#">></a>
</div>
</body>
</html>