<div class="slider" id="slider">
  <div class="holder">
    <div class="slide slide-1"><span>74°</span></div>
    <div class="slide slide-2"><span>64°</span></div>
    <div class="slide slide-3"><span>82°</span></div>
  </div>
</div>

<nav>
  <a data-id="0" href="#">1</a>
  <a data-id="1" href="#">2</a>
  <a data-id="2" href="#">3</a>
</nav>

@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100);

nav {
  width: 300px;
  margin: 20px auto;
  text-align: center;
}

nav a {
  text-decoration: none;
  background: #daedfa;
  display: inline-block;
  padding: 7px 10px 5px;
  border-radius: 50%;
  color: #555;
}

.slider {
  width: 300px;
  height: 500px;
  margin: 20px auto;
  overflow: hidden;
}
.holder {
  width: 300%;
}
.slide {
  float: left;
  width: 300px;
  height: 500px;
  position: relative;
}
.slide span {
  position: absolute;
  color: white;
  font-size: 100px;
  bottom: 15px;
  left: 15px;
  font-family: 'Josefin Slab', serif;
  font-weight: 100;
}
.slide-1 {
  background: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
.slide-2 {
  background: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
.slide-3 {
  background: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}

$("#slider").on("scroll", function(e) {
  $(".slide")
  .css({
    "background-position": $(e.target).scrollLeft()/12+ "% 0"
  });
});

$('nav').on('click', 'a', function(e) {
  var width, position;
  e.preventDefault();
  position = $(this).data('id');
  width = 300;
  
  $('#slider').animate({
    scrollLeft: position * width
  }, 800);
  
  return false;
});