assets/scripts/how-it-works-slides.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$(function(){
  var $container = $('div.how-does-it-work')

  if(!$container.length){
    return false; // bail out early if no slider on this page
  }

  var showSlide = function(index){
    $('.how-does-it-work__slide:nth-child(' + (index+1) + ')', $container)
    .show().siblings('.how-does-it-work__slide').hide()

    $('.how-does-it-work__slide__skip:nth-child(' + (index+1) + ')', $container)
      .addClass('active').siblings('.how-does-it-work__slide__skip').removeClass('active')
  }

  var makeSlideNavs = function(){
    var $slides = $('.how-does-it-work__slide', $container)
    var $nav = $('<div class="how-does-it-work__slide__nav">')
    for(var i=0; i<$slides.length; i++){
      $('<span class="how-does-it-work__slide__skip">').append('<span>')
        .appendTo($nav)
    }
    $('.container', $slides).append($nav)
  }

  makeSlideNavs()
  showSlide(0)

  $container.on('click', '.how-does-it-work__slide__skip', function(){
    showSlide( $(this).prevAll().length )
  })
});