Cdelphi78,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
var slideWidth = 980,
sliderTimer, currentSlide = 0, len;
function nextSlide() {
currentSlide++;
if (currentSlide >= len) currentSlide = 0;
$(".slidewrapper").animate({
left: -currentSlide * slideWidth
}, 800)
}
function prevSlide() {
currentSlide--;
if (currentSlide < 0) currentSlide = len - 1;
$(".slidewrapper").animate({
left: -currentSlide * slideWidth
}, 800)
}
$(function() {
len = $(".slidewrapper").children().length
$(".slidewrapper").width(len * slideWidth);
sliderTimer = setInterval(nextSlide, 3000);
$("#slider").on({
mouseenter: function() {
clearInterval(sliderTimer)
},
mouseleave: function() {
sliderTimer = setInterval(nextSlide, 3000)
}
});
$("#next_slide").click(function(event) {
event.preventDefault();
clearInterval(sliderTimer);
nextSlide()
});
$("#prev_slide").click(function(event) {
event.preventDefault();
clearInterval(sliderTimer);
prevSlide()
})
});
</script>
<style>
#slider {
width: 977px;
height: 300px;
position: relative;
overflow: hidden;
border: 3px solid rgba(75, 77, 97,0.6);
}
.slidewrapper{
position: absolute;
width:3000px;
left: 0;
top: 0;
height: 300px;
margin: 0;
padding: 0;
}
.slidewrapper .slide1 {
width:980px;
height:300px;
float:left;
list-style-type: none;
}
.slidewrapper .slide2 {
float:left;
}
#slider .arrows {
top:50%;
text-decoration: none;
}
#slider #prev_slide {
z-index: 10000;
position: absolute;
left:0;
margin-top:-25px;
font-size:40px;
}
#slider #next_slide {
z-index: 10000;
position: absolute;
right:0;
margin-top:-25px;
font-size:40px;
}
</style>
</head>
<body>
<div id="slider">
<ul class="slidewrapper" data-current="0">
<li class="slide1"><img src="http://www.optimum1.ru/images/shapka2.jpg" alt="slide1"></li>
<li class="slide2"><img src="http://www.mccombs.utexas.edu/~/media/Images/MSB/Departments/IROM/Events/WSBA/Cool-Technology-Wallpaper-1-1920x1080%20cropped.jpg?h=300&w=980" alt="slide2"></li>
<li class="slide3"><img src="http://timebasedsales.com/wp-content/uploads/2012/11/tbs_fejlecek_980x300_KV_industries_general.jpg" alt="slide3"></li>
</ul>
<a href="javascript: void(0)" id="prev_slide" class="arrows"><</a>
<a href="javascript: void(0)" id="next_slide" class="arrows">></a>
</div>
</body>
</html>