First, we need to prepare the underlying markup and store some element selectors. Add the following code between our anonymous function in our newly created HTML file:
$("#viewer").wrapInner("<div id=\"slide\"></div>"); var container = $("#slider"), prev = container.find("#prev"), prevChild = prev.find("a"), next = container.find("#next").removeClass("hidden"), nextChild = next.find("a"), slide = container.find("#slide"), key = "image1", details = { image1: { position: 0, title: slide.children().eq(0).attr("alt") }, image2: { position: -400, title: slide.children().eq(1).attr("alt") }, image3: { position: -800, title: slide.children().eq(2).attr("alt") }, image4: { position: -1200, title: slide.children().eq(3).attr("alt") }, image5: { position: -1600, title: slide.children().eq(4).attr("alt") } }; $("<h2>", { id: "title...