Hola, hice un slider con jQuery pero no me gusta como se ve mi código, ustedes cambiarían algo de este código?
Es que no quiero tener un código bochornoso y no tengo mucha experiencia con javascript.
slider.js
Código:
$(function(){
$('#slider li:gt(0)').hide();
function start() {
timer = setInterval(nextImg, 4000);
}
function reset() {
clearInterval(timer);
start();
};
function nextImg() {
$('#slider li:first-child').fadeOut(500).next('li').fadeIn(500).end().appendTo('#slider');
}
function prevImg() {
$('#slider li:first-child').fadeOut(500)($('#slider').prepend($('#slider li:last-child').fadeIn(500)));
}
$(".prev_slide").click(function() {
reset();
prevImg();
});
$(".next_slide").click(function() {
reset();
nextImg();
});
start();
});
index.html
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Hola forosdelweb</title>
<link rel="stylesheet" type="text/css" href="css/slider.css">
<link rel="stylesheet" type="text/css" href="site_media/css/styles.css?id=1">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/slider.js"></script>
</head>
<body>
<div id="slider_container">
<ul id="slider">
<li><img src="upload/1.jpg" alt="Slider 1" title="Slider 1"></li>
<li><img src="upload/2.jpg" alt="Slider 2" title="Slider 2"></li>
<li><img src="upload/3.jpg" alt="Slider 3" title="Slider 3"></li>
</ul>
<div class="prev_slide"><</div>
<div class="next_slide">></div>
</div>
</body>
</html> slider.css
Código:
#slider_container {
position:relative; width:600px;
}
#slider_container ul {
margin:0; padding:0; height:360px; list-style:none;
}
#slider_container ul li {
position:absolute;
}
#slider_container div {
position:absolute; top:47%;
}
#slider_container div.prev_slide{
left:20px;
}
#slider_container div.next_slide{
right:20px;
}
Gracias de antemano.