A robust but simple carousel slider that utilizes Custom Post Types so you can easily group and re-use bits of content, including images, videos, and custom HTML.
Cool Carousel is perfect for PageLines users wanting to hand-craft a clean, simple, organized carousel without being limited to using images from Flickr or featured images from posts.
- New February 2014: styling added to remove lines around Cool Carousel (how-to)
- Has both regular and Full-Width sections (2-in-1)!
- Version 1.8.3 worked with DMS 1.
- Version 1.8.4 and following work ONLY with DMS 2.
- Fully responsive
- Horizontal, Vertical, and Fade modes
- Mix images, videos, or HTML slides
- Images can link and/or show captions
- Adaptive height option
- Auto-start / Slideshow option
- Ticker mode (with pause on hover)
- Custom pager options (slide X of Y or just dots)
- Grayscale images or grayscale with color on hover
- PageLines cloning
- Customizable timing
- jQuery Easing settings per Cool Carousel
- Customized ordering or random order
- Loop or stop at last slide
- Choose how many slides to display at once
- Choose how many slides to advance at a time
- Advanced touch/swipe support and controls
- Works in: Chrome, Firefox, Safari, iOS, Android, IE7+
- And more!
There are some things to know before purchasing (and therefore support will not be provided in these situations).
- Cool Carousel’s display is best if all slides are the same width, especially if displaying multiple slides at a time. However, slides don’t need to be the same height, and there’s an Adaptive Height option if you want the carousel to resize up and down to fit each slide’s height.
- Auto-play continues to play a clicked video even after transitioning. Auto-play does have a “pause on hover” option, which work well for an auto-play carousel that included video (assuming the user’s mouse stays hovering over that carousel). There is an example of this setup below (the carousel with the Hunger Games video).
- FitVid (i.e. responsive video) is only available for YouTube, Vimeo, and DailyMotion videos (uses the PageLines video shortcode).
- Custom HTML (including iframe code) is not automatically made responsive. If you want your HTML slide(s) to be responsive within the carousel (and not spill over into the adjacent slides):
- use a PageLines shortcode (e.g. Google Maps shortcode)
- set the Cool Carousel options (e.g. Slide Width) to an appropriate size for that carousel’s content
- make your HTML code responsive
- don’t use HTML slides
- Grayscale image styling does not work on IE10 (instead shows 70% opacity).
Below are some examples so you can see how different settings and scenarios turn out.