From IThemes Codex
Revision as of 15:06, June 15, 2011 by Skylermoore (Talk | contribs)
Jump to: navigation, search

Series: DisplayBuddy



Carousel lets you display a rotating set of images anywhere on your site with customizable content and effects. Multiple groups of images may be created for use anywhere on your site. Each group can be fully customized.


Carousel has the ability to save multiple groups that can each have different images and settings. The only information required to create a group is a group name.

Adding Images

In order to add images you will need to select a group then adjust the "Slide Image Dimensions" width and height so that the Carousel plugin will know what dimensions it will need to resize the images to. After saving the desired image dimensions then you can add an image by clicking the "+Add image" button. Carousel uses WordPress's built in media up-loader. This will allow you to either upload new images or select images that you have already added to the media library.



  • Display multiple images at once.
  • Horizontal & vertical modes.
  • Two optional navigation methods.
  • Optional automatic transitioning.
  • Upload images or use existing Media Library images.
  • Customizable image size.
  • Some Carousel options include:
    • Pause on hover.
    • Bullet navigation.
    • Full speed control.
    • Navigation arrows.
  • Unlimited Carousel groups.
  • Widget support.
  • Shortcode support.
  • Support for changing layouts. More coming soon.
  • Customizable animation speeds.
  • Automatic upgrades.


How can I move the arrows from overlapping the Carousel?

The CSS styling below can be added to your theme's style.css. Adjust the -60 and -70 pixel values as needed.

To apply the change to all Carousels:

a.pb_carousel_default_prev {
   left: -60px !important;
a.pb_carousel_default_next {
   right: -70px !important;

To apply the change to an individual Carousel (replace the 1 with the specific entity you want to style):

#pb_carousel_prev-1 {
   left: -60px !important;
#pb_carousel_next-1 {
   right: -70px !important;

The Carousel container is too large until the page finishes loading. How do I fix this?

The CSS styling below will cap the height of the Carousel so that overflowing content will not show before the page is done loading. Change the 75 to your desired height:

#pb_carousel-1 {
   height: 75px;
   overflow: hidden;

Is it possible to open linked full sized images in a lightbox?

Yes. Use Auto Thickbox plugin.


Additional Resources

  1. Free Plugins by PluginBuddy
  1. PluginBuddy Tutorials
  3. Support Forums
Personal tools
iThemes Codex
Codex Navigation