       @$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')
 
+      @$slider_controls_container = $('.slider__controls-container')
+      if @$slider_controls_container.length is 0
+        @$slider_controls_container = @slides_container.addClass('slider__controls-container')
+
       @init() unless @$el.length is 0
 
       # Polyfill for resizer in IE7/8


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

      i=1
      while i <= $(@slides).length
        do (i) =>
          $slideLink = $('<a href="#" class="slider__pagination--link">'+i+'</a>')
          $slideLink.on 'click', =>
            @_goToSlide(i)
            return false
          @$slider_pagination.append($slideLink);
        i++
      @slides_container.after(@$slider_pagination)

      @_setupSlideClasses()



      $('.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']
