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.
- 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.
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
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:
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
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.