Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL

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 buton, the carousel will wrap back to the beginning. And vice versa if the back buton is clicked while viewing the frst 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 buton or any combinaton of the two. That's all there is to creatng 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 customizatons 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 prety limited use. Luckily, the jCarousel plugin is fexible enough to be used for a variety of diferent purposes. In this secton, we'll learn