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.
2. Name your Carousel group (like “Front Page) and click “+ Add Group“.
3. To get started adding images to the new Carousel group, click “Manage Images” next to the Carousel group name.
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.
4. On the same Carousel Settings page, select Enable responsive Carousel and Enable swipe (optional).
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.
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.
2. Edit the page or post where you want to display the Carousel and paste the shortcode into the content area.
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
When the browser width is below 560 px, Carousel automatically switches to the mobile view with swipe navigation enabled.