Creating an image scroller

This recipe demonstrates horizontal scrolling of a sequence of images toward the left or right by animating the left position of the parent container element. The constructs used in this example are summarized as follows:

Construct	Type	Description
$("#identifier")	jQuery selector	This selects an element based on its ID.
.animate()	jQuery method	This performs a custom animation on the specified CSS properties.
click	jQuery event	This is fired when you click on an element. It corresponds to the JavaScript click event.
event.preventDefault()	jQuery method	This prevents the default action of the event from being triggered.
left	CSS property	This is the position of the left edge of the element.
.on()	jQuery event binder	This attaches an event handler to the matched elements for one or more events.
z-index	CSS property	This is the z-order of an element. When elements overlap, the one with the higher z-order appears above the one...