Easy Slider — анимация вправо

Существует замечательный слайдер на основе маленького js плагина. Называется он easySlider. Последняя версия на момент написания статьи - 1.7. Описание плагина и все возможности можно найти на сайте cssglobe.com/easy-slider-17-numeric-navigation-jquery-slider.

Но есть у него маленький недостаток - в нем нет настройки анимации. Доступен только один вариант - плавная смена слайдов - справа выезжает новый слайдер, старый уезжает налево. Для большинства этот вариант является приемлемым. Но, что делать, если заказчик требует сделать движение слайдера в обратную сторону? Такой настройки в слайдере нет, поэтому мы сами сделаем эту манипуляцию.

Для начала создадим разметку, стили и инциализируем наш слайдер. Начнем с разметки:

<div class="slider-container">
	<div id="slider">
		<ul>
			<li style="width:640px; height:360px; background-color:yellow;"></li>
			<li style="width:640px; height:360px; background-color:green;"></li>
			<li style="width:640px; height:360px; background-color:red;"></li>
			<li style="width:640px; height:360px; background-color:pink;"></li>
		</ul>
	</div>
</div>

Теперь добавим немного стилей:

.slider-container {
	width:660px;
	height:380px;
	position:relative;
}
#slider { 
	width:640px; 
	position:relative;
	border:10px solid #eee ;
}
#slider ul {
	width:640px;
	height:360px;
	overflow: hidden;
	position:relative;
	padding:0;
	margin:0;
	list-style:none;
}
#slider ul li {
	width:640px;
	height:360px;
} 
#controls {
	position:absolute;
	right:15px;
	bottom:12px;
	text-align:center;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}
#controls li {
	margin:2px;
	display:inline-block;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-9999px;
	border-radius:16px;
	border:1px solid #ededed;
	background:#fff;
	cursor:pointer;
}
#controls li.current {
	background:#ededed;
}

Инициализируем наш слайдер:

$(document).ready(function(){
   $("#slider").easySlider({
      auto: true,
      continuous: true,
	  numeric: true
   });
});

Вот и все. В таком виде слайдер будет прекрасно работать. Не забудьте подключить плагин и библиотеку jQuery.

А теперь изменим плагин таким образом, чтобы анимация была в обратную сторону. Для этого открываем файл easySlider1.7.js в редакторе и меняем 75 строку:

$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));

На:

$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-right","-"+ w +"px"));

Теперь 132 строку:

$("ul",obj).css("margin-left",(t*w*-1));

На:

$("ul",obj).css("margin-right",(t*w*-1));

134 строка:

$("ul",obj).css("margin-left",(t*h*-1));

На:

$("ul",obj).css("margin-right",(t*h*-1));

166 строка:

{ marginLeft: p },

На:

{ marginRight: p },

Внимание! Теперь идем в стили и добавляем элементу #slider ul свойство float:right;, чтобы получилось:

#slider ul {
	width:640px;
	height:360px;
	overflow: hidden;
	position:relative;
	padding:0;
	margin:0;
	list-style:none;
	float:right;
}

Вот и все. Теперь наш слайдер перемещается в противоположном направлении. Задача выполнена.