Carousels and sliders are becoming increasingly popular in modern web designs. They allow to create rich navigation menus from images or other objects on your website. These are great presentation tools for any website, since they allow to simultaneously display several images linked to the most interesting sections of your website. It is possible to add rotating carousel banners to Plone-based sites. You can configure many different Plone carousel options including:
- what exactly you want to be displayed: e.g. title + text + image, title + image, or just image (a kind of slideshow for Plone)
- what pager controls you want to have: this might be numbers, titles, arrows, previous/next buttons, or none
- what transition type you want to be used for image shifting (slide or fade) and the speed with which banners will rotate
- and many other style configuration options using CSS
Plone Carousel Add-ons
Carousels can be added to any section of a Plone site, but usually they are used on site’s front pages. To implement carousel on Plone websites we basically use two Plone add-ons: Products.Carousel and collective.carousel. Since these two products have different algorithm for carousel generation we choose the best suitable one according to the projects’ specifics.
- Products.Carousel package allows to create elegant, javascript-animated splash panels in Plone. jQuery javascript is used to automatically rotate images, that are uploaded into a special folder. Images can be captioned and can be hyperlinked to any place within Plone site or to any external address. Such jQuery slideshows can be configured for any folder of a Plone site. They usually appear above the main body content.
- collective.carousel package is based on Scrollable plugin for jQuery Tools library. It allows to create carousels of the Plone site items. To select objects that will be displayed on such slideshow - you have to create a collection that will collect those objects. You can add more than one carousel on one page, that might be placed on different site places: usually above page’s title or as a portlet.
Carousel can also be located in site portlet columns. There is collective.portlet.shelf add-on for Plone that allows to display Plone collection's results in a carousel portlet browsing them by subcollections. Based on a standard Plone collection portlet, this product displays collection items in a carousel.
Carousel Customizations
Using above-mentioned products as a basis for custom carousel implementation, Quintagroup customizes their display view and functionality, we also add custom css styles to make it look just fine. We can customize such Plone slideshows according to any client’s requirements:
- add video files to rotate as carousel banners together with images
- provide different display view for every banner: default carousel settings allow to define display view for all banner objects (with/without image, title or description), but sometimes it is needed to make every banner have different view
- style the pager navigation: apart from default pager types (previous/next buttons, numbers, titles, or titles + text buttons) we can provide any-styled buttons for navigation between carousel banners
- customize title/text fonts & colors to display on the carousel
- customize the default grey image used as a background for banner text
- place carousel on any place on a page
- customize the look of items shown in a carousel
Example Carousels
Quintagroup has implemented Plone Carousel on several websites. We developed different carousel views for the following projects. Click the screenshots below to be taken to the site with live Plone carousel:
WIKID Technologies
- based on Products.Carousel
- auto banner rotation
- banners have special "Free trial" button with a styled hover effect, background image and title in larger font
Instrulog
- based on Products.Carousel
- auto rotation (every 8 seconds)
- navigation buttons are displayed below banners
- whole banners are linked
Quintagroup Schools Plone Theme
- based on Products.Carousel
- auto rotation (every 8 seconds)
- no navigation buttons between jQuery slider objects
- banner title and description located under the image can be linked to any URL
Københavns Ejendomme
- based on Products.Carousel
- auto rotation (every 4 seconds)
- no navigation buttons
- banner title and description are located above the image on a grey background
Bloddonorerne
- based on Products.Carousel
- auto rotation (every 8 seconds)
- no navigation buttons
- whole images are linked
Servicestyrelsen
- based on collective.carousel
- auto rotation (every 12 seconds)
- numbers are used to navigate between banners
- image with title and description are displayed
Ankestyrelsens
- based on collective.carousel
- jQuery slideshow images auto rotation
- numbers are used to navigate between banners
- image with title, description and 'Read More' link are displayed
StudyInDenmark
- based on Product.Carousel
- images/videos auto rotation
- numbers are used to navigate between banners
- 4 views for displaying carousel banners
Belgian Aeromodelers League
- based on Products.Carousel
- carousel has a fixed width that allows you to display a few images with different level of transparency: the three images to the right have lower transparency level than that to the left
- all images are linked to relevant PDF documents
How to get started
Interested in adding carousel to your Plone site? Need a consultation on custom carousel implementation for Plone? Need help with Plone theme with carousel development? Contact us today and we will do our best to help you.