Exercise 16-2 Use the Cycle 2 plugin for a slide show

In this exercise, you'll enhance a page so it uses the Cycle 2 plugin to runra slide show that displays the speakers.

Open and review the HTML for this page

1. Use your text editor to open the HTML file for this page: c:\htm15_cs.3_2\exercises\town_ha11_3\speakers\slideshow.html

2. Review the link and style elements for this page. Note that there isn't a CSS file for the Cycle 2 plugin, and that the script element gets the JavaScript file for the plugin from a CDN. Note too that a second script element gets a cycle2.shuffle JavaScript file from a CDN.

3. Test this page to see that it runs a default Cycle 2 slide show.

Change the way the Slide Show works and looks

4. With figure 16-11 as a guide, add a data-cycle-timeout attribute to the div element to the slide show so each slide is shown for 2 seconds.

5. With figure 16-11 as a guide, add a data-cycle-fx attribute so the shuffle transition is used for the slides. This option requires the use of the cycle2.shuffle.js file that's included by the third script element.

6. Add a data-cycle-pause-on-hover attribute set to a value of "true" so the slide show will pause when the user hovers the mouse over a slide. 
7. Go the website for the Cycle 2 plugin, and then go to the demo for providing captions that get their text from the all attributes of the images. Then, see if you can add the code to the HTML file that will make this work. The caption should be displayed below the images as shown above.

8. Test the page to be sure these changes work.