javascript - jqueryページ全体/ウィンドウスライダー

Question

たとえば、 http://littlemonsters.com/のようなページ全体のスライダーを作成することに興味があります。私は彼らのコードを見回して、理解しようとしています

-このページ全体のスライドをどのように作成したか (これは非常に大きなスライダーだと思います)、

-個々の「ページ」が互いに積み重ねられているにもかかわらず（通常のページのように）、スライドすると左右にスライドする方法（スライダー全体の問題の一部だと思います）

多くのスライダー プラグインでは、どうにかしてリスト アイテムを水平化しているようです (一方、手動でスライダーを作成すると、幅 9999 ピクセルのような非常に長い幅の広いリストが作成され、オーバーフローした非表示の表示ウィンドウが表示されます。これはおそらく最善の方法ではありません)。 . 上記のサイトで見つけたいくつかのjsが鍵を握っていると思いますが、よく理解できない/不完全です。

step = (id) ->
  width = $(window).width()
  dir = 1
  dir = -1  if id < curId
  curId = id
  $(".boxDisplay").animate
    left: -1 * dir * width
  , 500, "swing", ->
    $(this).css "left", 0
    $(this).removeClass "boxDisplay"
    next = $(".box:eq(" + (id - 1) + ")")
    next.addClass "boxDisplay"
    boxPosition()
    next.css "left", dir * width
    next.animate
      left: 0
    , 500, "swing"
animate = ->
  i = 0
  $(".box").animate(
    left: -50
  , 10).animate(
    left: 0
  , 50).animate(
    left: 50
  , 10).animate(
    left: 0
  , 50).animate(
    left: -25
  , 10).animate(
    left: 0
  , 50).animate(
    left: 25
  , 10).animate(
    left: 0
  , 50).animate
    left: 0
  , 800
boxPosition = ->
  height = $(".boxDisplay").height()
  $(".box").css "margin-top", ($(window).height() / 2) - (height / 2)

$(document).ready ->
  boxPosition()

ありがとう！