EpicSlider - Elements Slider in CoffeeScript

EpicSlider - Elements Slider in CoffeeScript

HTML

<div id="slider">
    <ul id="slides">
        <li>slide #1</li>
        <li>slide #2</li>
        <li>slide #3</li>
        <li>slide #11</li>
        <li>slide #22</li>
        <li>slide #33</li>
        <li>slide #111</li>
        <li>slide #222</li>
        <li>slide #333</li>
    </ul>

    <ul id="pagination">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

SCSS

#slider {
    width: 420px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    // overflow: hidden;
}

#slides {
    height: 100px;
    
    li {
        position: absolute;
        top: 30;
        left: 40;
        width: 33.3%;
        background: black;
        opacity: 0;
    }
}

#pagination {
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    
    li {
        display: inline-block;
        margin-right: 5px;

        &:last-child {
            margin-right: 0;
        }
            
        a {
            display: inline-block;
            height: 10px;
            width: 10px;
            border: solid 2px #2E9A67;
            border-radius: 10px;
            -webkit-transition: all 0.2s;
        }
            
        &.selected a {
            background: #2E9A67;
            -webkit-transform: scale(1.3);
        }
    }
}

CoffeeScript

class EpicSlider

  constructor: (options = {}) ->

    @options =
      slidesPerPage: options.slidesPerPage or 3
      slider:        options.slider
      slides:        options.slides
      pagination:    options.pagination
      transition:    options.transition or "back:out"
      duration:      options.duration or 800
      slideDelay:    options.slideDelay or 200
      interval:      8000

    @elements =
      slider:     @options.slider
      slides:     @options.slides
      pagination: @options.pagination

    @current =
      page: 0

    if @elements.slider

      @elements.slides.set "morph",
        transition: @options.transition
        link:       "chain"
        duration:   @options.duration

      @elements.slider.addEvents
        mouseenter: @pause
        mouseleave: @resume

      Elements.each @elements.pagination, (element, index) =>
        element.addEvents
          click: (event) =>
            event?.stop()
            currentIndex  = index or 0
            @current.page = currentIndex
            @switchPage()

      @timer = @switchPage.periodical @options.interval

      @switchPage()

  switchPage: =>

    # set the widths each time due to fluid or responsive layouts
    @widths =
      slides: @elements.slides[0].getSize().x
      slider: @elements.slider.getSize().x

    offsets =
      current: @current.page * @options.slidesPerPage
      next:    @options.slidesPerPage * (@current.page + 1)

    @lastPageSlides    = @currentPageSlides
    @currentPageSlides = @elements.slides.slice offsets.current, offsets.next
    @animatePages()
    @updatePagination()
    @updateCounter()

  updateCounter: =>
    @current.page = @current.page + 1;

    if @current.page is @elements.pagination.length
      @current.page = 0

  updatePagination: =>
    @elements.pagination.getParent().removeClass "selected"
    @elements.pagination[@current.page].getParent().addClass "selected"

  animatePages: =>
    Elements.each @lastPageSlides,...