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
Share this Page URL
Help

10. Featuring Content in Carousels and S... > Time for action — creating an animat... - Pg. 217

Chapter 10 Next, the carousel currently reaches a hard stop at either the beginning or the end. Instead, we'll make the carousel wrap--if the site visitor is viewing the last item in the carousel and presses the next button, the carousel will wrap back to the beginning. And vice versa if the back button is clicked while viewing the first item. We'll add a 'both' value for the wrap key so that the carousel will wrap at either end: $('#thumb-carousel').jcarousel({ scroll: 4, wrap: 'both' }); Refresh the page in the browser and page through the carousel using either the next or the previous button or any combination of the two. That's all there is to creating a simple carousel with the jCarousel plugin. What just happened? We used the jCarousel plugin to create a basic animated image thumbnail carousel. We used one of the default skins included with the plugin and made adjustments for the size of our content with CSS. A few simple customizations were passed to the carousel to make sure it worked just the way we wanted. Animated news ticker A horizontal image carousel is nice, but it has pretty limited use. Luckily, the jCarousel plugin is flexible enough to be used for a variety of different purposes. In this section, we'll learn