Leo Slide Layer Module

Slideshow sample

Demo 1

Demo 2

Download and Install

Download

Currently, the module will only be included in the pretashop theme that support the module by default. So you have to download the theme package then the module will be there for you to use.

Install

You can install the module as any other pretashop module. If you are new to prestashop, you can check How To Install Prestashop Module Video Tutorial

Publish the module

After install the module successfully, go to Modules then search Leo Slider Layer module then enable the module.

Next, go to position layout control (Modules >> Leo Positions Control Panel, assign Leo slider layer module to an active hook in your template.

Module configuration

Open the configuration panel of Leo Slider layer to configure.

1. General settings

Parameter explaintation.

• Add new group: you can create unlimited groups, each group includes multiple slideshow items.
• Manage group: all created groups will be listed here, you can edit any group and manage sliders in each group
• Choose file: you can browse an back-up file to import
• Override group or not: when you import a group, if the group duplicate with any group, you can select to override or not.

2. Group settings

Each group can have different settings, open the group and browse to the setting panel.

Group general setting

Parameter explaintation.

• Group title: add title of group, it's to manage groups easily.
• Active: enable this option to publish the group so that you can get the group displayed in front-page
• Show in hook: select hook the module will be displayed in
• Auto play: select whether to auto display slideshow items
• Delay: set the delay duration for the auto play
• Slideshow with mode: select mode to display slideshow: boxed, fullsize, fullscreen
• Medium and Large Desktops Width: set the width size of slideshow in medium and large desktop layout
• Small tablets width: set the width size of slideshow in small tablet layout
• Touch mobile: if enable, touch option will be enabled in mobile layout for slideshow
• Stop on hover: enable this option if you want to pause the auto play when user hover slideshow
• Shuffle Mode: enable or disable shuffle mode

Css settings

Parameter explaintation.

• Shadow type: select shadow type for slideshow.
• Show timeline: select to show/hide the timeline of slideshow
• Timeline position: select position to display timeline in slideshow
• Margin: set margin for slideshow (in pixel)
• Padding: set padding for slideshow (in pixel)
• Background color: select background color for slideshow
• Background image: enable this option if you want to show background image
• Background URL: add the url of image that you want to display as background image
• Group class: add class to hide slideshow in specific responsive layouts, tick on the responsive layouts and the class will be auto generated to the field.

Navigator settings

Parameter explaintation.

• Navigator type: select navigator type: thumbnail, bullet.
• Arrows: select arrow for Navigator
• Style: select style for navigator: round, navbar, spuare ...
• Offset horizontal/vertical: set the offset for navigator (in pixel), it's to help to locate navigators in slideshow
• Always show navigator: if you enable this option, the navigator will be always shown. If not, it will be shown when you hover slideshow.
• Hide navigator after: set duration to hide navigator (in seconds)

Front-end appearance

Image settings

Parameter explaintation.

• Image cropping: enable this option if you want to crop slideshow image to fit the slideshow block
• Image width/height: configure size of slideshow image (in pixel)
• Thumbnail width/height: configure size of thumbnail image
• Number of thumbnails: set number of thumbnails to be displayed

Front-end appearance

Slider setting

In the general setting, click on Manage Sliders of group that you want to configure.

1. Slider list

In the setting panel, it lists out all sliders of the group. You can select to configure/delete/duplicate any slider. You can create new slider by clicking on the "+" button on the right top corner.

2. Slider setting

Parameter explaintation.

• Slider title: add slider title
• Active: enable to publish the slider and it can be displayed in front-page
• Transition: select transition for the slider, it supports many transition types
• Slot amount: set number of slots for slider when transitioning
• Transition rotation: set rotation for transition
• Transition duration: set duration for transition
• Enable link: enable link so that you can add link for slider.
• Link: add link for the slider
• Thumbnail: you can browse any image to be displayed as thumbnail for the slider.
• Video: you can enable video embed for slider, it supports 2 video types: vimeo and youtube.

3. Slider element content/effect setting.

Parameter explaintation.

• Set backgroun color or image
• Add elements to the slider: image, video, text
• Configure the added element, add content for the element, set effect
• Layer collection: each element in slider is a layer, set the delay time for each layer to appear (in milliseconds)

Backup and restore

You can export any slideshow group, in the module setting panel, select the group you want to export then hit the Export button

To import a group, browse the exported file then hit the Import button.

Recommendation

To get support, you can raise your issues in our Forum or send us email through the Contact Form or send directly to the following email. We will try to answer and solve problems for you as soon as possible (within 2 days