JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

Using AnythingSlider
AnythingSlider requires several files to work: jQuery (of course), an external
JavaScript file with the slider programming, a CSS file for styling the basic slider
effect, and an image file for the sliders controls (next and previous buttons). You
can download Anything Slider from https://github.com/ProLoser/AnythingSlider/.
(We’ve also included a copy of the necessary files with the tutorial files for this
chapter.) The basic process for using the plug-in is straightforward:
1. Attach the anythingslider.css file to your web page.
This external CSS provides formatting instructions for the slider’s navigation
buttons, as well as behind-the-scenes styles for placing the individual slides.
You’ll be able to modify basic elements of the slider by altering styles in this file
(see below).
2. Link to the jQuery file.
jQuery provides the basic toolset AnythingSlider needs. As when using any
jQuery plug-in, you must load the jQuery JavaScript file first. If you load jQuery
after the plug-in file loads, it won’t work.
3. Link to the AnythingSlider file.
This file contains the basic programming to transform your HTML into a slider.
4. Add HTML.
AnythingSlider doesn’t require any complex HTML. You only need add a container
div with the ID of slider——and, inside that div, insert
one div for each panel, or “slide.” This is very similar to how panels are set up
with tabbed panels (page 302).
chapter 10: expanding your interface
www.it-ebooks.info
Adding a Content
Slider to Your Site
Figure 10-4:
To minimize on-screen clutter,
sites like Microsoft.com use
content sliders (outlined in
black) to display a single image
or chunk of content at a time.
In this example, the image
outlined can slide out of sight
to the left, revealing another
image with more information.
313