To begin with, we need to create the elements that will be used in the example and the styling to set their visual appearance.
Create a new HTML document using the template file we created in Chapter 1, Getting Started, and in between the
<body>
tag add the following underlying markup for our image slider:<div class="container"> <div id="slider"> <img src="http://placekitten.com/200/200?image=1"> <img src="http://placekitten.com/200/200?image=2"> <img src="http://placekitten.com/200/200?image=3"> <img src="http://placekitten.com/200/200?image=4"> <img src="http://placekitten.com/200/200?image=5"> <img src="http://placekitten.com/200/200?image=6"> <img src="http://placekitten.com/200/200?image=7"> </div> </div>
Save the page in the
jquery-animation
directory asimage-rotator.html
.We'll also need to add in our stylesheet for this example...