Phoca Carousel module - parameters
Main parameters
| Parameter | Value |
|---|---|
| Animation Speed | Set animation speed |
| Autoplay | (Yes | No) Enable or disable the Autoplay |
| Autoplay Speed | Set the speed of the Autoplay, in milliseconds. It must be greater than the sum of the times of all animations. |
| Prev/Next | (Yes | No) Enable or disable the Prev/Next navigation. |
| Dots | (Yes | No) Enable or disable the Dots navigation |
| Height | Set height of the slideshow. For example: '70vh'. Will be ignored when Fill Rest Of the Page parameter is enabled. |
| Fill Rest Of The Page | (Yes | Yes (50 %) | Yes (67 %) | Yes (75 %) | No) Enable or disable full height. Slideshow fills the rest of the page on large screens. |
| Fill Rest Of The Page Ratio (Small Screens) | When filling the rest of page on large screens is enabled, set the ratio between width and height to correct the size on small screens. |
| Display Slideshow (Minimum Width) | Set from which width the slideshow will be displayed |
| Background Image | Select desired background image. This background image applies to all slides and can be overridden by background image of each slide. |
| Background Video | Set background video (use full path, for example: images/video.mp4). Video will be displayed only when no background image and no background item image is set. |
| Display (Component) | Set component where the carousel will be displayed. If you will set more components, separate each component by comma (,). For example: com_phocacart, com_phocadownload, com_phocagallery. Leave empty to display carousel everywhere. |
| Display (View) | Set view where the carousel will be displayed. If you will set more views, separate each view by comma (,). For example: categories, category, item. If you set view, the component must be set too. Leave empty to display carousel everywhere. |
| Display ID | Set ID where the carousel will be displayed. If you will set more IDs, separate each ID by comma (,). If you set ID, the view and component must be set too. Leave empty to display carousel everywhere. |
Item parameters
| Parameter | Value |
|---|---|
| Background Image | Select desired background image |
| Background Image Animation | Enter background animation. For example: 'kenburnsBottomLeft' |
| Title | Enter the title |
| Title CSS | Enter the title CSS |
| Title Animation | Enter title animation. For example: 'fadeIn' |
| Description | Enter the description |
| Description CSS | Enter the description CSS |
| Description Animation | Enter description animation. For example: 'bounceInLeft' |
| Button Title | Enter the button title |
| Button Link | Enter the button link |
| Button CSS | Enter the button CSS |
| Button Animation | Enter the button animation. For example: 'zoomIn' |
| First Image | Select the first image |
| First Image CSS | Enter first image CSS |
| First Image Size CSS | Enter first image size CSS |
| First Image Animation | Enter first image animation. For example: 'bounceInDown' |
| Second Image | Select the second image |
| Second Image CSS | Enter second image CSS |
| Second Image Size CSS | Enter second image size CSS |
| Second Image Animation | Enter second image animation. For example: 'bounceInDown' |
Example of Item parameters:
Title CSS:
animation-duration: 5s; animation-delay: 0s; position: absolute; left: 26%; top: 15%; font-size: 4vw; z-index: 1000; text-align: center; color: #fff; font-weight: bold;
Description CSS:
animation-duration: 6s; animation-delay: 3s; position: absolute; left: 29%; top: 28%; z-index: 1000; padding: 1vw; font-size: 3vw; line-height: 1.3; color: #fff;
Button CSS:
animation-duration: 1s; animation-delay: 4s; position: absolute; bottom: 25%; padding: 9vw auto; border: 4px solid #DAA520; color: #DAA520; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; z-index: 1001; width: 20vw; font-size: 2vw; text-transform: uppercase; white-space: nowrap; background: rgba(0,0,0,0.1);
First Image CSS:
animation-duration: 2s; animation-delay: 2s; position: absolute; bottom: 20%; left: 7%; z-index: 1002;
First Image Size:
height: 20vw; width: auto;
Second Image CSS:
animation-duration: 1s; animation-delay: 3s; position: absolute; bottom: 0%; right: 10%; z-index: 1003;
Second Image Size:
height: 34vw; width: auto;
You can see the slideshow here: Phoca Premiere temlate demo