Part 4. How to Create Responsive Image Carousel

The following tutorial will teach how to create your own carousel in Black Bee responsive theme on Plone 4.2 website.

To add image carousel to Black Bee Responsive Theme to be displayed on front and site inner pages - first you need to install Products.Carousel package and activate it via Site Setup -> Add-ons.

add-ons.jpg

Now you can create carousel for the home page or any other site section. In any case, go to the desired location and shift to Carousel tab. Here you can configure main carousel settings. This folder needs to be published so that its contained elements become visible, so, don't forget to do that. Now add new Carousel Banner:

add-carousel.jpg

In the opened window - provide banner Title, it will be displayed instead of site slogan on this image and upload the new banner Image. You can also specify Link URL to make image linked to certain address. Chaste theme has different Carousel looks on the front page and site inner pages. On the front page, if you add an image and some text into Banner, the text will be displayed on the left side in italics just under the logo. If it is too long the last line to fit the space will be blurred. The recommended image width is 960px. The height of the banners is determined by the  height of the image added to the first banner.

Now when you return to the home page - you'll see the carousel banner above the main content area. It's the default carousel positioning:

default-carousel.jpg

Now add more banners into Carousel Banner folder so that all banners are rotated. Also you can change the way the images are rotated by selecting one of the available options in the Pager type list box. Preview and Next buttons and Numbers were specially styled to compliment the overall theme design.

Top Carousel


To have the carousel in the header, switch to  Carousel tab and in Unique Id field type in top-carousel.

top-carousel.jpg

Banner's title will be displayed on transparent background.

top-banner.jpg

Connect with our experts Let's talk