Simple Slider 2 (JQuery)

by Marcel Ferdinand

HTML

<div id="sliderWrap">
    <div id="slider">
        <img id="slider1" alt="0" src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png">
        <img id="slider2" alt="1" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png">
        <img id="slider3" alt="2" src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png">
    </div>
	<div id="nav">
    <a href="#left" class="left">&#9664;</a>
    <a href="#right" class="right">&#9654;</a>
</div>
</div>

CSS

#sliderWrap {
    position:absolute;
	width:200px;
	height: 200px;
}
#sliderWrap #slider {
    height:200px;
	width:200px;
	position: absolute;
}
#sliderWrap #slider img {
    width:100%;
    height:100%;
    display:none;
    top:0;
    position:absolute;
}
#sliderWrap #nav {
	text-align: center;
	position: relative;
	top:50%;
}

#sliderWrap #nav{
	text=decoration:none;
}

#sliderWrap #nav>.left{
    position: absolute;
	left: 5%;
	
}
	
#sliderWrap #nav>.right{
    position: absolute;
	right: 5%;
}

#sliderWrap #nav a{
	text-decoration:none;
	color:#000;
}

.left,.right{
  opacity:0.5;
  transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.left:hover,.right:hover{
  opacity:1;
}

JavaScript

$(function () {
    var count = $("#slider > img").length
    var slider = 1
    var speed= 5000
    var fadeSpeed = 300
    var loop 
    start()
    $("#slider1").fadeIn(fadeSpeed);
    $('.right').click(right)
    $('.left').click(left)
    $('#slider').hover(stop,start)
    
    function start(){
        loop = setInterval(next, speed)
    }
    function stop(){
        clearInterval(loop)
    }
    function right() {
        stop()
        next()
        start()
        return false
    }

    function left() {
        stop()
        prev()
        start()
        return false
    }

    function prev() {
        slider--
        if (slider < 1) {
            slider = count
        }

        $("#slider > img").fadeOut(fadeSpeed)
        $("#slider" + slider).fadeIn(fadeSpeed)
    }

    function next() {
        slider++
        if (slider > count) {
            slider = 1
        }

        $("#slider > img").fadeOut(fadeSpeed)
        $("#slider" + slider).fadeIn(fadeSpeed)
    }
});