index.html

<div class="slider-wrap">
  <div class="slider" id="slider">
    <div class="holder">
      <div class="slide" id="slide-0"><span class="temp">74°</span></div>
      <div class="slide" id="slide-1"><span class="temp">64°</span></div>
      <div class="slide" id="slide-2"><span class="temp">82°</span></div>
    </div>
  </div>
  <nav class="slider-nav">
    <a href="#slide-0" class="slide-0">Slide 0</a>
    <a href="#slide-1" class="slide-1">Slide 1</a>
    <a href="#slide-2" class="slide-2">Slide 2</a>
  </nav>
</div>

script.js

var slider = {

  // Not sure if keeping element collections like this
  // together is useful or not.
  el: {
    slider: $("#slider"),
    allSlides: $(".slide"),
    sliderNav: $(".slider-nav"),
    allNavButtons: $(".slider-nav > a")
  },

  timing: 800,
  slideWidth: 300, // could measure this

  // In this simple example, might just move the
  // binding here to the init function
  init: function() {
    this.offsetCalc();
    this.onScroll();
    this.onClick();
  },
  offsetCalc: function(el){
    var sliderOffset = this.slideWidth / 2
        cnt = 0,
        that = this,
        maxWidth = 0;
    $.each(this.el.allSlides, function(){
      maxWidth += that.slideWidth;
      cnt = maxWidth - that.slideWidth / 2;
      that.onScroll($(this), cnt, maxWidth);
    });
  },
  onScroll: function(slide, offset, maxWidth){
    var that = this;

    this.el.slider.on("scroll", function(event) {
      console.log($(event.target).scrollLeft());
      var minOffset = offset - that.slideWidth / 2;
      if( $(event.target).scrollLeft() >= minOffset && $(event.target).scrollLeft() <= maxWidth ){
        var element = "." + $(slide).prop("id");
        $(".slider-nav > a").removeClass("active");
        $(element).addClass("active");
      }
      slider.moveSlidePosition(event);
    });
  },
  onClick: function(){
    this.el.sliderNav.on("click", "a", function(event) {
      slider.handleNavClick(event, this);
    });
  },
  moveSlidePosition: function(event) {
    // Magic Numbers =(
    this.el.allSlides.css({
      "background-position": $(event.target).scrollLeft()/6-100+ "px 0"
    });
  },
  handleNavClick: function(event, el) {
    event.preventDefault();
    var position = $(el).attr("href").split("-").pop();
    this.el.slider.animate({
      scrollLeft: position * this.slideWidth
    }, this.timing);

    this.changeActiveNav(el);
  },
  changeActiveNav: function(el) {
    this.el.allNavButtons.removeClass("active");
    $(el).addClass("active");
  }
};

slider.init();

Slider-like-Yahoo-Weather-App.markdown

Slider like Yahoo Weather App

A Pen by Nikolina Spirkovska on CodePen.

License.

style.css

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

.slider-wrap {
  width: 300px;
  height: 500px;
  margin: 0 auto;
}
.slider {
  overflow-x: hidden;
}
.holder {
  width: 300%;
}
.slide {
  float: left;
  width: 33.3%;
  height: 500px;
  position: relative;
  background-position: -100px 0;
  z-index:-1;
}
.temp {
  position: absolute;
  color: white;
  font-size: 80px;
  bottom: 20px;
  left: 15px;
  font-family: 'Josefin Slab', serif;
  font-weight: 100;
}
#slide-0 {
  background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
  background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
  background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
.slide:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(transparent, black);
  z-index:-1;
}
.slider-nav {
  text-align: center;
  margin: -25px 0 0 0;
}
.slider-nav a {
  width: 12px;
  height: 12px;
  display: inline-block;
  background: #ddd;
  overflow: hidden;
  text-indent: -9999px;
  border-radius: 50%;
}
.slider-nav a.active {
  background: #999;
}