     @initOptions()
     @$sections = $('section').wrapAll('<div class="ruban"></div>')
     @$ruban    = $('.ruban')
-    @$current  = @$sections.first()
 
     @toc()
+    @current(@$sections.first())
+    @pagination()
     @checkHash()
     @highlight()
     @resize()


  checkHash: =>
    hash = window.location.hash
    slide = hash.substr(2) || 1
    @go(slide)

  highlight: ->
    hljs.initHighlightingOnLoad()


    if $section.length and (options.force or not $section.is(@$current))
      @checkSteps($section)
      @navigate($section)
      @translate($section)
      @current($section)
      @pagination()

  navigate: ($section) ->
    window.location.hash = "/#{$section.attr('id') || $section.index() + 1}"

  translate: ($section) ->
    y = $section.prevAll().map(->
      $(@).outerHeight()
    ).get().reduce((memo, height) ->
      memo + height
    , 0)
    @$ruban.css('transform', "translateY(-#{y}px)")


  current: ($section) ->
    @$current.removeClass('active').trigger('inactive') if @$current?
    $section.addClass('active').trigger('active')
    @$current = $section

  pagination: ->
    if @options.pagination
      unless @$pagination
        @$ruban.parent().append('<footer class="pagination"></footer>')
        @$pagination = $('.pagination')
        @total = @$sections.length

      @$pagination.html("#{@$current.index() + 1}/#{@total}")

  toc: ->
    $toc = $('.toc')
