PageLines Cool Carousel Section

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.

PageLines Cool Carousel Section

PageLines Cool Carousel Section

Highlights

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!

Limitations

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).

Screenshots

1 wp-admin - Add New Cool Carousel Slide

1 wp-admin – Add New Cool Carousel Slide

2 Cool Carousel Editor Options

2 Cool Carousel Editor Options

3 Cool Carousel Editor Options

3 Cool Carousel Editor Options

4 Cool Carousel Editor Options

4 Cool Carousel Editor Options

5 Cool Carousel Editor Options

5 Cool Carousel Editor Options

6 Cool Carousel Editor Options

6 Cool Carousel Editor Options

7 Cool Carousel Editor Options

7 Cool Carousel Editor Options

Examples

Below are some examples so you can see how different settings and scenarios turn out.

Images courtesy of Unsplash and various free image placeholder services.