       ]
       onBeforeChange: (slider, current, next) =>
         @navSlider.slider('values', 0, next * @navSliderStepSize)
+        @updateActiveYear next
+
+  updateActiveYear: (newIndex) ->
+    @years.removeClass 'active'
+    @years.eq(newIndex).addClass 'active'

    @initSlider()

  initNavSlider: =>
    @yearsEl           = @navSlider.find('.years')
    @yearsValues       = @yearsEl.data('values')
    @navSliderStepSize = (100 / (@yearsValues.length - 1))

    @yearsValues.each (item, index) =>
      year = $("<div class='year'>#{item}</div>")
      year.css('left', (@navSliderStepSize * index) + '%')
      year.appendTo @yearsEl

    @navSlider.slider
      values: [0]


    @navSlider.on 'slide', (ev, ui) =>
      @slider.find('.slick-track')[0].style.webkitAnimationPlayState = 'paused'
      newPositionIndex = ui.value / @navSliderStepSize
      @slider.slickGoTo newPositionIndex
      @updateActiveYear newPositionIndex

  initSlider: =>
    @slider.slick
