 
       $('.slider__control--next, .slider__control--prev').html(current.replace(/(^[0-9]+)/, index))
 
+      $('.slider__pagination--link.is-active').removeClass('is-active')
+      $('.slider__pagination--link').eq(index-1).addClass('is-active')
+
     _setupSlideClasses: ->
       @$el.find(@slides+':first').addClass('is-current').next().addClass('is-next')
       @$el.find(@slides+':last').addClass('is-prev')
+
+      # Give the user a visual cue that there are controls before fading them out.
+      setTimeout =>
+        @$slider_controls.addClass('is-faded-out')
+      , 1000
 
     _resetSlideClasses: ->
       classes = ['is-current', 'is-next', 'is-prev', 'js-bottom-layer', 'js-middle-layer']

      @$prev = $('<a href="#" class="slider__control slider__control--prev">1 of '+@$el.find(@slides).length+'</a>')
      @$legacy = $('html.ie7, html.ie8, body.browserIE7, body.browserIE8')

      @init() unless @$el.length is 0

      # Polyfill for resizer in IE7/8


    init: ->
      @$slider_controls.append(@$next).append(@$prev)
      @$slider_controls_container.append(@$slider_controls)

      i=1
      while i <= $(@slides).length
        do (i) =>
          $slideLink = $('<a href="#" class="slider__pagination--link">'+i+'</a>')

          if i is 1
            $slideLink.addClass('is-active')

          $slideLink.on 'click', (e) =>
            $('.slider__pagination--link.is-active').removeClass('is-active')
            $('.slider__pagination--link').eq(i-1).addClass('is-active')

            @_goToSlide(i)
            e.preventDefault()
          @$slider_pagination.append($slideLink);
        i++

      @$slider_controls_container.append(@$slider_pagination)

      @_setupSlideClasses()

