Simple image slider

by Jithin Raj P R

HTML

<div class="wrapper">
  <div id="slider">
    <img id="1" alt="start" src="http://hdimagesnew.com/wp-content/uploads/2015/11/3d-nature-wallpapers-7.jpg">
    <img id="2" alt="1" src="http://hdimagesnew.com/wp-content/uploads/2015/11/3d-nature-wallpapers-4.jpg">
    <img id="3" alt="2" src="http://hdimagesnew.com/wp-content/uploads/2015/11/3d-nature-wallpapers-5.jpg">
  </div>
</div>
<div id="nav">
  <a href="#left" class="left">previous</a>
  <a href="#right" class="right">next</a>
</div>

CSS

#wrapper {
  position: relative;
}

#slider {
  height: 300px;
}

#slider img {
  width: 400px;
  height: 300px;
  display: none;
  top: 0;
  position: absolute;
}

#nav {
  background: beige;
  width: 200;
  text-align: center;
}

JavaScript

$(document).ready(function() {
  var count = $("#slider > img").length
  var slider = 1
  var speed = 5000
  var fadeSpeed = 300
  var loop = ''
  start()
  $('#1').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).fadeIn(fadeSpeed);
  }

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

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