Navigation
•
•
 
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
 
•
•