Plugin for swipe.js that hints the previous or next slide in from the sides when hovering over a prev/next trigger element for non-touch users. Currently is still very buggy.

swipe-hint

$ ->
  window.homeSwipe = Swipe(document.getElementById('home-swipe'))

  new homeSwipeButtons()

class homeSwipeButtons
  constructor: ->
    @bindElements()

  bindElements: ->

    matrixToArray = (matrix) ->
      matrix.substr(7, matrix.length - 8).split ", "

    totalSlides = homeSwipe.getNumSlides() - 1
    slideAmount = 100

    $(document).on 'click.homeSwipeButtons', '.feature-nav-next', (e) =>
      window.homeSwipe.next()
    $(document).on 'click.homeSwipeButtons', '.feature-nav-prev', (e) =>
      window.homeSwipe.prev()

    teaseSlide = (direction, action) ->
      currentSlide = homeSwipe.getPos()
      prevSlide = currentSlide - 1
      nextSlide = currentSlide + 1

      if prevSlide < 0
        prevSlide = totalSlides
      if nextSlide > totalSlides
        nextSlide = 0

      prevSlidePosMatrix = matrixToArray($('.swipe-item[data-index="' + prevSlide + '"]').css('-webkit-transform'))
      prevSlidePos = parseInt(prevSlidePosMatrix[4])
      prevSlideIn = prevSlidePos + slideAmount
      prevSlideOut = prevSlidePos - slideAmount

      nextSlidePosMatrix = matrixToArray($('.swipe-item[data-index="' + nextSlide + '"]').css('-webkit-transform'))
      nextSlidePos = parseInt(nextSlidePosMatrix[4])
      nextSlideIn = nextSlidePos - slideAmount
      nextSlideOut = nextSlidePos + slideAmount

      $('.swipe-item').css('-webkit-transition', '300ms')

      if direction == 'prev'
        if action == 'on'
          $('.swipe-item[data-index="' + prevSlide + '"]').css('-webkit-transform', 'translate(' + prevSlideIn + 'px, 0px) translateZ(0px)')
          $('.swipe-item[data-index="' + currentSlide + '"]').css('-webkit-transform', 'translate(' + slideAmount + 'px, 0px) translateZ(0px)')
        else if action == 'off'
          $('.swipe-item[data-index="' + prevSlide + '"]').css('-webkit-transform', 'translate(' + prevSlideOut + 'px, 0px) translateZ(0px)')
          $('.swipe-item[data-index="' + currentSlide + '"]').css('-webkit-transform', 'translate(' + 0 + 'px, 0px) translateZ(0px)')
      else if direction == 'next'
        if action == 'on'
          $('.swipe-item[data-index="' + nextSlide + '"]').css('-webkit-transform', 'translate(' + nextSlideIn + 'px, 0px) translateZ(0px)')
          $('.swipe-item[data-index="' + currentSlide + '"]').css('-webkit-transform', 'translate(-' + slideAmount + 'px, 0px) translateZ(0px)')
        else if action == 'off'
          $('.swipe-item[data-index="' + nextSlide + '"]').css('-webkit-transform', 'translate(' + nextSlideOut + 'px, 0px) translateZ(0px)')
          $('.swipe-item[data-index="' + currentSlide + '"]').css('-webkit-transform', 'translate(' + 0 + 'px, 0px) translateZ(0px)')

    $('.feature-nav-prev').hover (->
      teaseSlide('prev', 'on')
    ), ->
      teaseSlide('prev', 'off')

    $('.feature-nav-next').hover (->
      teaseSlide('next', 'on')
    ), ->
      teaseSlide('next', 'off')


    $(document).on 'hover.homeSwipeButtons', '.feature-nav-next', (e) =>

      currentSlide = homeSwipe.getPos()


      nextSlidePosMatrix = matrixToArray($('.swipe-item[data-index="' + nextSlide + '"]').css('-webkit-transform'))
      nextSlidePos = nextSlidePosMatrix[4]

      console.log('next is', nextSlide)
      console.log('next position is', nextSlidePos)