recomendaciones código para slider

mathiasmontiel · #1 (**permalink**) 07/01/2014, 12:08

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">&lt;</div>
            <div class="next_slide">&gt;</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.