Take the 2-minute tour ×

I'm interested in making a whole page slider like in http://littlemonsters.com/ for example. I've looked around at their code and am trying to figure out

-how they did this whole page slide (which I guess is just a very big slider), and also

-how although the individual 'pages' are stacked on top of each other (like a normal page), when they slide, they are sliding left and right (part of the whole slider problem I guess)

It seems that for many slider plugins, they somehow horizontalize list items (whereas when I do sliders by hand I make a really really long wide list with like width 9999px and have an overflow hidden viewing window--this is probably not the best way). here's some js I found on the above site that I think holds the key but I can't understand too well/incomplete.

step = (id) ->
  width = $(window).width()
  dir = 1
  dir = -1  if id < curId
  curId = id
    left: -1 * dir * width
  , 500, "swing", ->
    $(this).css "left", 0
    $(this).removeClass "boxDisplay"
    next = $(".box:eq(" + (id - 1) + ")")
    next.addClass "boxDisplay"
    next.css "left", dir * width
      left: 0
    , 500, "swing"
animate = ->
  i = 0
    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 ->


share|improve this question
You might be able to use this jQuery plugin to get what you're looking for: catchmyfame.com/2011/08/08/new-jquery-plugin-the-page-carousel –  j08691 Jan 16 '12 at 15:42
looks just like what I'd want except the plugin didn't work for me, and it seems kind of limited (the nav bar that is) –  butterywombat Jan 17 '12 at 4:31
add comment


Your Answer



Browse other questions tagged or ask your own question.