"ARI Smart Content - Cloud Carousel" module shows 3d image carousel in module positions. The module can be enabled/disabled and configured on "Extensions → Module Manager" page on Joomla! backend. The module offers the following parameters:
- Images is a main and required parameter. It is used to select the data source which will be used to select images which will be shown into the carousel. If a data source is not selected, the module will show nothing. It is possible to select data sources from Media data section.
- Use constant ID if the parameter is set to 'Yes', accordion container will have the constant ID based on module ID. It can be useful for caching or other purposes.
- Load method is used to specify load method on client side. If it is set to 'On Load', the carousel will be created when page and all resources (images, styles and etc.) are loaded by a browser. If it is set to 'DOM Ready', the carousel will be created immediately when page is loaded (it doesn't wait till all resources are loaded, they will be loaded in parallel). In other words, 'DOM Ready' event occurs before 'On Load' and if possible it is preferable to use it instead of 'On Load'. This parameter can be useful to resolve conflict with some 3rd party extensions, if the extension doesn't work properly when it's set to 'DOM Ready', try to switch it to 'On Load'.
- Module Class Suffix will be applied to the CSS class of the module. This allows for individual module styling.
- Header text is a text which will be shown before the carousel.
- Footer text is a text which will be shown after the carousel.
"Lightbox integration" section contains parameters which are used to integrate the carousel with a lightbox extension. If the carousel is integrated with a lightbox extension, images (or web pages) will be shown into the lightbox when a user clicks by a carousel image. It will work if the selected data source contains thumbnails and images and the carousel shows thumbnails (see Use thumbnails parameter) or links to web pages are defined for images in the data source (for example in description file for Local images). The section contains the following parameters:
- Lightbox integration is used to select a lightbox application which will be integrated with the carousel. If the parameter is set to "None", the extension will be not integrated with a lightbox extension. The selected lightbox application should be installed and enabled.
- Lightbox width is width of the lightbox. This parameter is used if a web page (it is not applied for images) is shown into the lightbox. Possible values: 400, 80% and etc.
- Lightbox height is height of the lightbox. This parameter is used if a web page (it is not applied for images) is shown into the lightbox. Possible values: 400, 80% and etc.
- Grouping items if the parameter set to "Yes", it will be possible to navigate between images (pages) into the lightbox.
- Background color is a background color which will be used for content which is shown into the lightbox. It is supported only by Sexy Lightbox application.
"Styles parameters" section contains parameters to define some style properties of the carousel:
- Width is width of the carousel. If Responsive parameter is set to "Yes", this value will be used as maximum width. Possible values: 500, 650 and etc.
- Height is height of the carousel. Possible values: 400, 570 and etc.
- Link target is used to specify where links (to images or to pages) will be open when a user clicks by a carousel image.
- Custom link target is used to specify a custom target (for example frame name) if values from Link target parameter are not suitable.
- Theme is used to choose a theme.
- CSS Styles is used to specify additional CSS styles. It is possible to use {$id} predefined variable which will be replaced with ID of carousel container. For example the following code can be used into the parameter to change color for titles which are shown for carousel images:
#{$id}_wrapper .ari-cloud-carousel-title {color:#FF9900;}
"Carousel parameters" section contains the following parameter:
- Responsive is used to specify should be carousel responsive or not. If it is responsive then carousel size will be adapted to screen size.
- Min scale is the minimum scale applied to the furthest item. The item at the front has a scale of 1. To make items in the distance one quarter of the size, minScale would be 0.25
- Reflection height is teight of the auto-reflection in pixels, assuming applied to the item at the front. The reflection will scale automatically. A value of 0 means that no auto-reflection will appear.
- Reflection gap is amount of vertical space in pixels between image and reflection, assuming applied to the item at the front. Gap will scale automatically.
- Reflection opacity is used to specify how transparent the reflection is. 0 is invisible, 1 is totally opaque.
- X radius is half-width of the circle that items travel around. If set to 0, it will be calculated automatically.
- Y radius is half-height of the circle that items travel around. If set to 0, it will be calculated automatically.
- X pos is horizontal position of the circle centre relative to the container. If set to 0, it will be calculated automatically.
- Y pos is vertical position of the circle centre relative to the container. If set to 0, it will be calculated automatically.
- FPS is the approximate frame rate of the carousel in frames per second. The higher the number, the faster and smoother the carousel movement will appear. However, frame rates that are too high can make the user's browser feel sluggish, especially if they have an under powered machine. The default setting of 30 is a good trade off between speed and performance.
- Speed value represents the speed at which the carousel rotates between items. Good values are around 0.1 ~ 0.3. A value of one will instantly move from one item to the next without any rotation animation. Values should be greater than zero and less than one.
- Auto rotate is used to turn on auto-rotation of the carousel using either 'Left' or 'Right' as the value. The carousel will rotate between items automatically. The auto-rotation stops when the user hovers over the carousel area, and starts again when the mouse is moved off.
- Auto rotate delay is a delay in milliseconds between each rotation in auto-rotate mode.
- Mouse wheel support if set to 'Yes', this will enable mouse wheel support for the carousel. Carousel images will be rotated when a user scrolls mouse wheel.
- Reverse mouse wheel used with Mouse wheel support parameter to rotate images in opposite way.
- Keyboard navigation is used to enable keyboard navigation. If the parameter is enabled, it is possible to rotate images using keyboard arrow buttons.
- Reverse keyboard nav used with Keyboard navigation parameter to rotate images in opposite way.
- Bring to front if set to 'Yes', moves the item clicked on to the front.
- Stop rotation on mouse action if this parameter is set to 'Yes', auto-rotate will be disabled on mouse click and over
- Stop in background is used to stop the carousel when browser tab with the carousel is inactive
- Initial slide index is used to specify index of initial slide.
- Open only active item if this option is set to 'Yes', the extension will show assigned link with carousel image only for active carousel image. This option doesn't work if used integration with a lightbox extension.
- Background image if you want to use background image for the carousel specify path to background image in this parameter. Use a relative path to an image from Joomla! root directory. For example if the image is located by <joomla_directory>/images/carousel_bg.jpg path, populate the parameter with images/carousel_bg.jpg value.
- Left button label is used to specify a label for left navigation button.
- Right button label is used to specify a label for right navigation button.
- Show navigation is used to specify should the module show navigation buttons or not.
- Show title is used to specify should should the module show titles of images or not.
- Show description is used to specify should should the module show descriptions of images or not.
- Only front description if this parameter is set to 'Yes', the carousel will show description only for active item
- Use thumbnails is used to specify need to use thumbnails (if the selected data source contains thumbnails) instead of original images or not.
- Ignore original images if this parameter is enabled, the extension will not create links to original images for thumbnails.