Layer Slideshow documentation


Layer Slideshow provides a unique yet simple experience to create slideshow with multiple slides and layers in Joomla.





1.1 Install

Our component is Joomla 3.x compatible. All the features and 3rd party integrations are included in all memberships.
In order to install our component you have to download the extension .zip file and use standard Joomla installer.




Then click on Browse > Upload and Install button, component, modules and plugins will be installed activated by default.


1.2 Update & automatic updater

In order to update the extension you can install a new version over the old one by downloading the ZIP file from JoomUnited or use the automatic updater (recommended).




The automatic updater, which push the update notification, is embedded in the Joomla extension you've installed. So you'll get notified like any other extension in the dashboard or using the menu: Extension > Manage > Update menu.

Login to your account to update

You need to login to your JoomUnited account to update all your JoomUnited Joomla extensions. In order to login access the main configuration of the component then click on the Live update tab. At the bottom, you'll find a login button. 




Enter your JoomUnited credentials, the same you use to login here @



The button will turn orange, congrats! you can now update all the JoomUnited extensions on this website! If your membership is expired you'll get a renew link and a text that explain that.



Note: one single login will allow you to update all the JoomUnited extensions (regarding your membership). Login won't expire unless you disconnect it. 



2.1 Slide creation

The main idea of Layer Slideshow is to be able to create a nice slideshow with layers without complexity.
On the main interface, on the left side you have access to a New button. Each new slideshow contains slides and layers options.




If you don't have any themes, you can consult our sample themes. There are 5 themes available in total, please click Load Theme button to view. 




Once you choose one, the center part will be reloaded with theme background, links and layers. The layers are groupped in the right panel.




Note that each theme have a different layout number, theme 1 have 1 layer, theme 2 have 2 layers...

Under the slide, you can see Preview All Slides button and there are 3 devices (laptop/desktop, tablet, mobile) for you to check how your slideshow will look like.

You can also use Duplicate Slide or Add New Slide button on the right.




Each slide contains Edit and Remove icon




If you want to make your own slideshow, you can use buttons on the right panel. Please see the next chapter below.

2.2 Layout settings

You can define a specific layout for each slideshow. It’s better to define the layout before starting the layer edition because it will determine the image width, text size, items position...




The slideshow layout options are the following:

  • Responsive: Make your slideshow with adaptive element for mobile devices, all text, images will be dynamically resized regarding mobile devices
  • Align Slideshow: Align the whole slideshow
  • Width/height: Define the width/height of the slideshow. This is the most important parameter, because once its set, all the images you’ll put in the slideshow may be resized with our cropping tool to this dimension. If you change the size, you may need to update your images.
  • Duration: Define each slide duration
  • Button style: define navigation element style
To make a full width slideshow you have 2 options: set the width to “100%” or define a fixed full size, for example something like 1900px width.

2.3 Add a slideshow in your content

To add a slideshow in your content and put it online, you need to use the editor button. Load an article, a custom module or anything else and click on the Layer Slideshow button.




Then choose a slideshow to insert





3.1 Slide Background

Each slides has a background, you can load your own from your image library or use our Online Library.



The Select button will open a lightbox with a media manager, this is an enhanced version of the Joomla media manager.



It offers you options to drag’n drop new images, select, remove, fit or apply effects on images.


The most important is the crop function. The crop function will load a window with your image and a frame that takes the size of the slideshow defined in the layout.



Click on the Crop image button to insert the image cropped as a background.

3.2 Button layer editor

You can create a new button layer by clicking + Layer button on the right panel. 




After filling the form, click Create layer button. A new button appears on your slide.




The button manager will allow you to create your own button style, store it and reuse it later. Usually buttons are defined for all slides and should be reused.



You’ll be able to create a style using the left side window tool then Insert/Save/Edit it. You have options to define background, border styles and mouse hover effect. 




To insert a button into content, you have option to click on Insert button or + symbol of a saved button.




You can also edit and save an existing style, just click on the pen and change parameters.




Finally, you can define a custom link for the button.




3.3 Image layer editor

You can create a new image layer by clicking + Layer button on the right panel. 




You can insert your own icon or picture in Image layer by clicking on Edit button to change them.




Then you’ll be able to choose your own image or use an image from our JU Library or an icon from Icon Finder.

You can of course define position of each element from the preview using drag’n drop.

3.4 Video layer editor

You can add a new video layer by clicking + Layer button on the right panel. 




By clicking on Edit icon of the video layer, you can change video URL to the layer. It supports video URL from Youtube, Vimeo, Dailymotion.




3.5 Transitions

You can set the transitions for a slide or all slides in your slideshow. There are 2 types of transitions: 2D and 3D.




Each layers has Layer Transitions tab so you can choose style for them.





4.1 JoomUnited library

JU Library is an external library we are hosting to give you nice and free to use images. All the images from our library will be downloaded and stored on YOUR server. So you can it as long as you want.
Library is accessible as long as your subscription is valid.



The JU Library contains clipping path images (with transparent background) and background images. Use the check to select one or both.




You can also make a tag search.



Once you’ve selected an image you’ll be able to download it on your server, and to edit it.




4.2 Icon finder integration

An icon finder integration is also available to load for example social networks icons.



A search engine will then be opened




You can make a request and also use size filtering system.




Then, like in the JU Library tool you’ll be able to download your icon on your server. You also have size download options regarding the filtering defined before.