Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple collection rotator for slideshows, quotes
jQuery ->
# rotate items
rotator_builder = (selector, args) ->
trans_in = args.trans_in || "fadeIn"
trans_out = args.trans_out || "fadeOut"
trans_in_dur = args.trans_in_dur || 1000
trans_out_dur = args.trans_out_dur || 400
show_dur = args.show_dur || 7000
$items = $(selector)
num_items = $items.length
cur = 0
prev = num_items - 1
loop_fn = () ->
cur %= num_items
prev %= num_items
$($items[prev])[trans_out] trans_out_dur
$($items[cur]).delay(trans_out_dur+50)[trans_in](trans_in_dur)
# need that +50 to make sure there's no overlap and the prev item is completely gone
cur++
prev++
setTimeout loop_fn, show_dur
loop_fn
############################################
# Example
looper = rotator_builder "#stuff li",
trans_in: "fadeIn",
trans_out: "fadeOut",
trans_in_dur: 1000,
trans_out_dur: 400,
show_dur: 7000
looper()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment