Film Slider documentation

Introduction

TemplateMonster FilmSlider module is an implementation of elegant and professional jQuery plugin ‘Slider Pro’. Allows you to add slider with multiple layers to your store home page. Rich collection of slider configuration options and user interface will help you to configure your slider fast and easily.

Installation

Attention!!!

Due to the peculiarities of the engine you will have to use any console environment with the command line. Module configuration will be mainly performed via the command line. If you perform changes on the hosting server, you can contact your hosting provider for help and use the hosting command line.

First, copy the content of the archive (app folder) to the root folder of your online shop. After copying run the console and navigate to the root shop folder.
Then run the following commands in the command line, one by one:

bin/magento setup:upgrade
bin/magento index:reindex
bin/magento cache:clean

You can clear site cache and re-index data in your shop admin panel, in System -> Tools -> Cache Management/Index Management section. But we cannot guarantee these admin panel options will work properly due to the engine features and its novelty. We recommend that you use the command line.

After reindexing data and clearing cache, remove all the content from var and pub/static folders, except for .htaccess file. Now we are ready to navigate to the site admin panel to configure the module.

Extension settings

In the main navigation menu you’ll see new menu option TemplateMonster.
To start working with the FilmSlider module, click Template Monster -> Sliders menu item.

Here you can see a list of available sliders where you can disable/enable, delete or edit sliders.

To add new slider click Add New Slider button in the top right corner.
On the slider configuration screen in General Options section you can see all available slider settings. Slider Items section allows you to add slides to your slider.

Let’s see what slider options are available. As you can see options are divided into several parts to make the configuration interface more user friendly.

General Options

Main Settings

This section allows you to set slider title, select store view, enable/disable slider, set its width and height. Each option refers to Slider Pro jQuery plugin property. You can find more specific description of each property in official Slider Pro documentation. Some jQuery plugin properties may not present in the FilmSlider configuration, we will add them in future releases.

Slider dimensions (width and height) can be set to a fixed value, like 900 (indicating 900 pixels), or to a percentage value, like '100%'.

Please note: slide title, store view and status are required, you cannot save the slide without these values set.

Image Settings

In image section you can adjust slider image configuration settings. Each option has a brief description. Let’s describe some of them more specifically.

aspectRatio

Sets the aspect ratio of the slides. If set to a value different than -1, the height of the slides will be overridden in order to maintain the specified aspect ratio.

imageScaleMode

Sets the scale mode of the main slide images (images added as background). 'cover' will scale and crop the image so that it fills the entire slide. 'contain' will keep the entire image visible inside the slide. 'exact' will match the size of the image to the size of the slide. 'none' will leave the image to its original size.

forceSize

Indicates if the size of the slider will be forced to full width or full window.

Note: It's possible to make the slider full width or full window by giving it a width and/or height of '100%'. However, sometimes the slider might be inside other containers which are less than full width/window. The 'forceSize' property is useful in those situations because it will still enlarge the slider to fill the width or window by overflowing its parent elements.

Slides settings

Slides settings section allows to configure slides behaviour. Here you can configure slides animation, visible slider size, slides shuffle and loop.

Fade animation settings

This section contains settings for fade animation. Fade animation can be enabled on slide switch.

You can set if you want to fade out previous slide and fade animation duration in milliseconds.

Auto play settings

Autoplay feature in Film Slider allows to loop through the slides automatically. This configuration settings contain options to configure auto play delay, direction and pause with mouse cursor on hover.

Controls settings

Slider controls are the navigation buttons that let you switch the slides. In FilmSlider there are several types of navigation controls: prev/next arrows, pagination buttons. Enabled keyboard navigation allows you to switch between the slides using keyboard. Also, you can enable button that will switch slider to the full screen mode.

Responsive settings

Responsive settings section configures slider behaviour on mobile devices. Here you can define screen width breakpoints (small, medium, large). Also, you can enable touch swipe behaviour to let user switch between the slides with swipe gestures.

Caption Settings

Caption feature allows to add text to each slide. This section allows you to enable caption fade animation and set its duration.

Layers main settings

Layers configuration settings contain slides layers behaviour. Each option has a brief description under the input fields.

Adding Slides

You can add new slides only after saving the slider. Click Save and Continue Edit button in the top right corner. When the slider is saved, switch to Slider Items tab.

Click Add Slider Item to add a new slide. Let’s see what slide configuration options are available.

Slide Information

Here you can input slide title and set its status (enabled/disabled).

Slide Images

This section allows you to add images to the slide. Click Insert Image button to open Image library where you can select available images.

You can also upload images from your computer.

Under the Image field you can see your slide preview. You are free to set preview size the way you like. We moved the next section of slide configuration to the separate section as it is fully related to slide layers.

Working with layers

FilmSlider is a multi-layer slider. This mean that your can add multiple independent layers to your slide. Layers can be added to the slide on the slide configuration screen described above. This screen contains several sections of layers settings.

Layers list

Layers list section allows to add layers to your slide. You can add image layers and text layers. Use corresponding buttons to add layers.

By clicking on Add layer image you’ll see an image library where you can select from available images or upload images from your computer. By clicking Add layer text, you’ll see new text layer added and layer settings became associated with your new particular layer.

Layer text settings

Using Layer text settings section you can input layer text, layer size, colors, font styling, etc.

In the Layer text/html field you can input your layer content in both text and html format.

Layer text position settings

In this section you can define text layer position.

Layer animation settings

This section allows you to define layer animation. You can set its position on the slide, set transition, offsets, delay, duration, etc.

When you add several layers, bottom configuration settings (position and animation) will show settings for the selected layer.

Adding slider to page

To add slider to your page please use Magento widgets. In the main admin panel menu click Content -> Pages item.

Select the page you want to add slider to and click Edit.

At the page editing screen switch to Content section and click Insert Widget button.

In the appeared window select widget type Template Monster FilmSlider, select the slider you want to insert and click Insert Widget button.

When you are done adding the widget click Save Page button and switch to store frontend to see the result.

Help & Support

In case of any difficulties with the Film SLider or any other products of TemplateMonster.com please contact our 24/7 support team for assistance.