Alexbelkevich,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slide-item-rot {
float: left;
}
.orange {
background: #FFCC00;
}
.orange + div{
display: block;
}
span {
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
function htmSlider(){
/* Зададим следующие параметры */
/* обертка слайдера */
var slideWrap = jQuery('.slide-wrap');
/* кнопки вперед/назад и старт/пауза */
var nextLink = jQuery('.next-slide');
var prevLink = jQuery('.prev-slide');
var playLink = jQuery('.auto');
/* Проверка на анимацию */
var is_animate = false;
/* ширина слайда с отступами */
var slideWidth = jQuery('.slide-item-rot').outerWidth();
/* смещение слайдера */
var scrollSlider = slideWrap.position().left - slideWidth;
/* Клик по ссылке на следующий слайд */
nextLink.click(function(){
if(!slideWrap.is(':animated')) {
slideWrap.animate({left: scrollSlider}, 500, function(){
slideWrap
.find('.slide-item-rot:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
});
}
});
/* Клик по ссылке на предыдующий слайд */
prevLink.click(function(){
if(!slideWrap.is(':animated')) {
slideWrap
.css({'left': scrollSlider})
.find('.slide-item-rot:last')
.prependTo(slideWrap)
.parent()
.animate({left: 0}, 500);
}
});
/* Функция автоматической прокрутки слайдера */
function autoplay(){
if(!is_animate){
is_animate = true;
slideWrap.animate({left: scrollSlider}, 500, function(){
slideWrap
.find('.slide-item-rot:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
is_animate = false;
});
}
}
/* Клики по ссылкам старт/пауза */
playLink.click(function(){
if(playLink.hasClass('play')){
/* Изменяем клас у кнопки на клас паузы */
playLink.removeClass('play').addClass('pause');
/* Добавляем кнопкам вперед/назад клас который их скрывает */
jQuery('.navy').addClass('disable');
/* Инициализируем функцию autoplay() через переменную
чтобы потом можно было ее отключить
*/
timer = setInterval(autoplay, 1000);
} else {
playLink.removeClass('pause').addClass('play');
/* показываем кнопки вперед/назад */
jQuery('.navy').removeClass('disable');
/* Отключаем функцию autoplay() */
clearInterval(timer);
}
});
playLink.click() //для теста
}
htmSlider()
})
</script>
</head>
<body> <div class="slider-rot">
<div class="slide-list">
<div class="slide-wrap">
<div class="slide-item-rot">
<img src="images/image3.png" alt="" />
<span class="slide-title">Ритуальные ткани</span>
</div>
<div class="slide-item-rot">
<img src="images/image2.png" alt="" />
<span class="slide-title">Пледовые ткани</span>
</div>
<div class="slide-item-rot">
<img src="images/image1.png" alt="" />
<span class="slide-title">Пледы</span>
</div>
<div class="slide-item-rot">
<img src="images/image3.png" alt="" />
<span class="slide-title">Ритуальные ткани</span>
</div>
<div class="slide-item-rot">
<img src="images/image2.png" alt="" />
<span class="slide-title">Пледовые ткани</span>
</div>
<div class="slide-item-rot">
<img src="images/image1.png" alt="" />
<span class="slide-title">Пледы</span>
</div>
</div>
<div class="clear"></div>
</div>
<div name="prev" class="navy prev-slide">prev</div>
<div name="next" class="navy next-slide">next</div>
<div class="auto play">auto play</div>
</div>
</body>
</html>