Entire Site
Free Trial
Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
10. Featuring Content in Carousels and S... > Time for action — creating a feature...
We'll get started as usual by setting up our basic HTML file and associated files and folders, just like we did in Chapter 1,Designer, Meet jQuery.
- In the body of the HTML document, the HTML markup for our featured content slider will be very similar to the HTML we set up for a news ticker. The only difference is that I'm replacing the images with larger images since I want images to be the main focus of the slider. I'm using images that are 600 pixels wide by 400 pixels tall. The following is a sample of the HTML:
<div class="jcarousel-skin-slider"> <ul id="featured-carousel"> <li> <a href="#"><img src="images/600/Switzerland.jpg" alt="Switzerland"/></a> <div class="info"> <h4>Switzerland</h4> <p>Switzerland, officially the Swiss Confederation, is a federal republic consisting of 26 cantons, with Bern as the seat of the federal authorities</p> </div> </li> <li> <a href="#"><img src="images/600/CostaRica.jpg" alt="Costa Rica"/></a> <div class="info"> <h4>Costa Rica</h4> <p>Costa Rica, officially the Republic of Costa Rica, is a country in Central America, bordered by Nicaragua to the north, Panama to the south, the Pacific Ocean to the west and south and the Caribbean Sea to the east.</p> </div> </li> ... </ul> </div>
I have 12 items in total on my list, each marked up just the way you see here. Note that I've wrapped my list in a
divwith the classjcarousel-skin-slider. We'll be using this class to style our list with CSS.
