Written by on

Just Released: Carousel 2.0 with Responsive Support

carousel300b

Today we’re excited to announce that Carousel, from our DisplayBuddy series of plugins, has just been updated for use with responsive WordPress themes. Now your Carousel image groups will dynamically respond to browser widths with an option to enable swipe navigation for mobile devices.

Creating a Responsive Carousel Image Group

1. After updating to Carousel 2.0, expand the DisplayBuddy menu from the WordPress dashboard navigation menu and click the Carousel page.

carousel-dashboard

2. Name your Carousel group (like “Front Page) and click “+ Add Group“.

add-group

3. To get started adding images to the new Carousel group, click “Manage Images” next to the Carousel group name.

manage-images

 4. Click “+ Add Image” to upload a new image or choose from existing images in the Media Library. After selecting your images, you’ll now see your images listed in the Carousel group.

images-carousel

 4. On the same Carousel Settings page, select Enable responsive Carousel and Enable swipe (optional).

carousel-settings

Displaying Carousel on Your Site

Carousel can be displayed on your site 1) in widget areas or 2) in posts or pages via shortcodes.

In Widget Areas

1. To add Carousel to widget areas, visit Appearance > Widgets. You’ll see Carousel listed in your Available Widgets list. Simply drag the Carousel bar to the Widget area on the right. From there, you’ll be able to select your Carousel group from the drop-down list.

carousel-widgets

In Posts or Pages via Shortcode

1. To add Carousel to post or page content areas, you’ll need the Carousel group’s shortcode. You’ll find the shortcode for each Carousel group listed on the Carousel Settings page. Copy this shortcode.

shortcode

2. Edit the page or post where you want to display the Carousel and paste the shortcode into the content area.

shortcode-content

Responsive Views

At an average desktop browser width of 1280 x 800 pixels, Carousel renders the size specified from the Carousel settings.

For this example Carousel (screenshots):
  • The Builder Layout was set to 1000px
  • Carousel slide dimensions 500 x 700px
full-width

When the browser width is below 560 px, Carousel automatically switches to the mobile view with swipe navigation enabled.

responsive-view

Enjoy!

All current, licensed DisplayBuddy users will find the Carousel 2.0 update available from within the WordPress dashboard via Plugins > Installed Plugins. You can also download the latest version of Carousel after logging in to the iThemes Member Panel (check out our free Easy Theme and Plugin Upgrades plugin for manual updates).

Comments

  1. I can see the use for plugins like this, they save time on development and are great for projects that dont have a big enough project to warrant me spending the time, great work.

Respond