View source for Team:Korea U Seoul/template/contents slider

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        
        <style>
            .slider{padding:5px 100px; width: 943px; height: 452px; position: relative;}
            .slider > img { width: 943px; height: 452px;}
            .slider_navi{position: absolute; bottom: 30px; left: 110px;}
            .slider_navi > span {background-color: #242424; margin: 10px; cursor: pointer; padding: 5px 7px; color: #FFFFFF;}
        </style>
    </head>
    <body>
        <div style="width:100%;">
        <div class="slider" style="border-radius:10px; margin:0 auto;">
            <img src="https://static.igem.org/mediawiki/2015/1/19/%EA%B8%B8_%EB%B0%B0%EA%B2%BD.png">
            <img src="https://static.igem.org/mediawiki/2015/5/55/Danche2.jpg">
            <img src="https://static.igem.org/mediawiki/2015/3/36/Danche4.jpg">
            <img src="https://static.igem.org/mediawiki/2015/1/17/Danche3.jpg">
            <img src="https://static.igem.org/mediawiki/2015/3/3b/Danche.jpg">
            <div class="slider_navi">
            </div>
        </div>
        </div>
    </body>
    <script>
        var slider = $(".slider");
            slider.width(943);
            slider.height(452);
        var slider_navi = $(".slider_navi");
        var imgs = slider.children("img");
        
        var i=0;
        imgs.each(function(){
            $(this).hide();
            slider_navi.append("<span style='font-family: David; font-size: 14pt;' onclick=\"slide_img("+i+")\">"+(i+1)+"</span>");
            i++;
        })
        $(imgs[0]).slideDown();
        
        function slide_img(index){        
            imgs.each(function(){
                $(this).hide();
            });
            var img = imgs[index];
            $(img).fadeIn("slow");
        }
    </script>
</html>