Code of Blue Chair Bay Rum Flipsnap implementation.

flipsnap.styl

.viewport
  width: 100%
  overflow: hidden
  margin: 0 auto
  position: relative
.bullets-container
  size: 100% 25px
  absolute: bottom 13px left 0px right 0px
  text-align: center
  @media lt-sm
    display: none
  span
    position: relative
    size: 15
    display: inline-block
    margin: 0 .5%
    background: rgba(white, .5)
    rounded()
    transition: all speed easing
    &.current
      background: rgba(white, .9)

.flipsnap
  opacity: 0
  list-style: none
  width: 9999px
  height: auto
  margin: 0 
  padding: 0
  &.active
    opacity: 1
  .container
    height: 100%
  &:after
    content: ''
    display: block
    clear: both
    height: 0
  li
    background: dark-blue
    margin: 0
    position: relative
    width: 1366px
    height: 445px
    display: block
    background-position: top center 
    background-repeat: no-repeat
    background-size: cover
    float: left
    overflow: hidden

  img.hero
    max-width: 100%
    margin-bottom: -20px
  .callout
    max-width: 700px
    absolute: bottom 50px left
    padding: 18px 30px 18px 200px
    margin-left: -160px

    background: linear-gradient(left, rgba(white, 0), rgba(white, .35) 25%, rgba(white, .65))
    
    border-top-right-radius: 10px
    border-bottom-right-radius: 10px

main.coffee

# Slideshow Resize
  flipSnapResize = ->
    wW = $(window).width()
    wH = Math.round(wW * 0.45)
    if $('.flipsnap').length
      $('.flipsnap').each ->
        self = $(this)
        slides = self.find('.item')
        slides.css({width: wW, height: wH})
        self.css({width: slides.length * wW})
    Flipsnap('.flipsnap', { distance: wW})
  
  # Slideshow
  slideshow = ->
    if $('.flipsnap').length
      flipSnapResize()
      wW = $(window).width()
      flipsnap = Flipsnap('.flipsnap', { distance: wW})

      $('.flipsnap').each ->
        self = $(this)
        slides = self.find('.item')
        viewport = self.parent('.viewport')
        if self.hasClass('bullets')
          viewport.append("<div class=\"bullets-container\"></div>")
          $bullets = viewport.find('.bullets-container')
          for slide, index in slides
            $bullets.append("<span></span>")
          $pointer = $bullets.find('span')
          $pointer.first().addClass('current')
          flipsnap.element.addEventListener 'fspointmove', () ->
            $pointer.filter('.current').removeClass('current')
            $pointer.eq(flipsnap.currentPoint).addClass('current')
        $(window).resize(flipSnapResize)
        self.addClass('active')
  slideshow()