A custom Joomla! Module that implements the standard Bootstrap Carousel with multiple configuration options.
Created and Maintained by Morris Projects Ltd
Note: This was setup and tested using the Morris Projects Base - Bootstrap Joomla Template. This uses the latest version of Bootstrap (at time of writing v3.3.2) and Joomla! v3.3.6. If you are using any version before or template please let us know if this works/any issues.
There are multiple configuration options for the module to help style and fit your site better. A Joomla Module for the Bootstrap Carousel by Morris Projects Ltd. Includes the ability to add up to 10 images with different configuration options for the layout of the carousel and items in the carousel.
Controls if the carousel is displayed in a Bootstrap container... <div class="container">...
Add a specific CSS ID to the carousel to help with styling. This is also required for the directional arrows/tabs to work in the carousel.
Add a specific CSS class to the carousel to help with styling.
Switch on and off the default arrows for the carousel.
Switch on and off the under control blobs for the carousel.
Control the slide speed of the items in the carousel in ms, defaulted to 5000 like Bootstrap.
Images for the carousel are controlled from the Module > Images tab. You have the option to have 10 images/items.
This is the path/image file that you would like to show as the background for the item in the carousel. NOTE: You will need to add an image for the item to show in the carousel. If you do not want to add an image but what a custom item, please see the Sample 3 below.
The img alt tag in HTML... <img src="../" alt="This bit..."/>
This is the heading content in the image carousel caption. This uses the same format as recommended by Bootstrap.
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
As above, this is the caption text for the carousel.
Adding text will show a Bootstrap primary button styled button with the relevant text.
Button / Image Link (No Button Shown) / No Link - This decides how the link for the carousel works. Button means the only link on the item will be the relevant button. Image Link means the whole carousel item will be a link, this also means no button will be shown as there is no point having a button shown when the whole item is clickable. No Link is... no link.
This is linked to the main menu for the Joomla! site and gives you a quick selection for where the link should be to.
Alternatively you can use the custom link for entering a path on your site more specific than the menu options.
Inline-style:
This is a sample item with Header and Caption Text.
Inline-style:
This is a sample with header, caption and button text.
Inline-style:
This is a sample with header, caption and button text. This item is configured with a 1px transparent image as the image. We then add a custom CSS ID for the item and style the background-color for the item based on the ID. You can find a sample 1px transparent image here