Navigation
•
•
 

Main Options

Parameter Value
Animation Speed Set animation speed
Autoplay 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 Enable or disable the Prev/Next navigation.
Dots 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 component by comma (,). For example: categories, category, item. If you set view, the component must be set too. Leave empty to display carousel everywhere.
Load Animate CSS Library Load Animate CSS library
Load Swiper JS Library Load Swiper JS library

Product Options

Parameter Value
Product Title CSS Enter the product title CSS
Example:
 animation-duration: 5s;
 animation-delay: 0s;
 position: absolute;
 left: 6%;
 top: 15%;
 font-size: 3vw;
 z-index: 1000;
 text-align: center;
 color: #555;
 background-color: rgba(255,255,255,0.5);
 padding: 0 0.5vw;
Product Title Animation Enter product title animation.
Example:
fadeIn
Display Product Description Display or hide product description
Product Description CSS Enter the product description CSS
Example:
 animation-duration: 5s;
 animation-delay: 0s;
 position: absolute;
 left: 6%;
 top: 25%;
 font-size: 1.5vw;
 z-index: 1000;
 text-align: left;
 color: #555;
 background-color: rgba(255,255,255,0.5);
 padding: 0 0.5vw;
Product Description Animation Enter product description animation.
Product Price CSS Enter the product price CSS
Example:
 animation-duration: 5s;
 animation-delay: 0s;
 position: absolute;
 left: 60%;
 bottom: 40%;
 font-size: 3vw;
 z-index: 1000;
 text-align: center;
 color: #fff;
 background-color: rgba(0,0,0,0.5);
 padding: 0 0.5vw;
Product Price Animation Enter product price animation.
Example:
fadeIn
Display Product Discount Description Display or hide product discount description
Product Discount Description CSS Enter the product discount description CSS
Example:
 animation-duration: 5s;
 animation-delay: 0s;
 position: absolute;
 left: 60%;
 bottom: 35%;
 font-size: 1.5vw;
 z-index: 1000;
 text-align: left;
 color: #fff;
 background-color: rgba(0,0,0,0.5);
 padding: 0 0.5vw;
Product Discount Description Animation Enter product discount description animation.
Example:
fadeIn
Display Stock Display or hide stock information
Check Stock Enable or disable stock checking. If enabled, products that do not have items in stock, will be not displayed.
Display Stock Display or hide stock information
Stock Text Prefix Set stock text prefix
Stock Text Suffix Set stock text suffix
Stock CSS Enter the stock CSS
Example:
 animation-duration: 5s;
 animation-delay: 0s;
 position: absolute;
 left: 60%;
 bottom: 30%;
 font-size: 1vw;
 z-index: 1000;
 text-align: left;
 color: #fff;
 background-color: rgba(0,0,0,0.5);
 padding: 0 0.5vw;
Stock Animation Enter stock animation.
Example:
fadeIn
Button Title Enter the button title
Button Link Type (Product View) Select button link type
Button CSS Enter the button CSS
Example:
animation-duration: 5s;
 animation-delay: 0s;
 position: absolute;
 right: 5%;
 bottom: 17%;
 font-size: 1.5vw;
 text-transform:uppercase;
 font-weight: bold;
 text-align: center;
 z-index: 1000;
 color: #fff;
 background-color: #EB008A;
 border-radius: 0.3vw;
 padding: 1vw;
Button Animation Enter the button animation.
Example:
fadeIn
Display Product Image Display or hide product image
Product Image Type (Small Thumbnail | Medium Thumbnail | Large Thumbnail | Original Image) Set product image type
Product Image CSS Enter product image CSS
Product Image Size CSS Enter product image size CSS
Example:
 animation-duration: 5s;
 animation-delay: 2s;
 position: absolute;
 bottom: 20%;
 left: 7%;
 z-index: 1002;
Product Image Animation Enter product image animation.
Example:
zoomIn
Countdown Timer Text Prefix Set countdown timer text prefix
Countdown Timer Text Suffix Set countdown timer text suffix
Countdown Timer CSS Enter the countdown timer CSS
Example:
 animation-duration: 5s;
 animation-delay: 0s;
 position: absolute;
 right: 0%;
 bottom: 0%;
 font-size: 5vw;
 text-align: right;
 z-index: 1000;
 width: 100%;
 color: #fff;
 background-color: rgba(0,0,0,0.5);
 padding: 0 0.5vw;
Countdown Timer Animation Enter countdown timer animation.
Example:
fadeIn
Ignore Minimum Quantity Rule If minimum quantity rule is active in product discount options (minimum quantity of ordered items is greater than 1), product itself will be displayed in this module but discount price will be not displayed. If you enable this parameter then minimum quantity rule will be ignored and discount price will be displayed. If enabled, it is recommended to write information into product discount description that the discount is valid when ordering more items.
Background Image Animation Enter background animation. For example: 'kenburnsBottomLeft'. Background image can be set in product discount options in administration - in product edit view.
Example:
kenburnsBottomLeft
Number of Products (1 | 2 | 3 | 4 | 5) Set number of products displayed in slideshow.
 
•
•