Now that the slider has been created, we can add the event handlers that will drive the functionality:
$("#ui li a").not(prevChild).not(nextChild).click(function(e){ e.preventDefault(); key = $(this).attr("href").split("#")[1]; slide.animate({ left: details[key].position }, "slow", "easeOutBack", postAnim); }); nextChild.add(prevChild).click(function(e){ e.preventDefault(); var arrow = $(this).parent(); if (!slide.is(":animated")) { slide.animate({ left: (arrow.attr("id") === "prev") ? "+=400" : "-=400" }, "slow", "easeOutBack", function(){ (arrow.attr("id") === "prev") ? postAnim("back") : postAnim("forward") }); } });