Introduction
What is AP Smart LayerSlider?
AP Smart LayerSlider is a premium, fully responsive and touch-enabled Joomla module that allows you to create professional and elegant sliders with smooth hardware accelerated transitions. This slider was built with user experience in mind, providing a clean and intuitive user interface in the admin area and a smooth navigation experience for the end-users.
AP Smart LayerSlider supports keyboard and touch navigation with swipe gesture. It’s a fully responsive and device friendly slider which works perfect in all major devices. AP Smart LayerSlider is layer slider as well, with the ability of adding any HTML contents (texts, DIVs, headings, images, videos, etc.) in layers, where your creativity is unleashed.
Also, we provided a powerful backend configuration so you can setup your AP Smart LayerSlider with ease.
Highlight features:
- CSS3 Transitions. Fast, accelerated CSS3 animations. All animations in the slider are powered by CSS3 transitions, ensuring the smoothest animations that are possible at the moment.
- Animated Layers. Layers can be both animated and static and they can hold any HTML content. Also, layers can be scaled down automatically or with CSS. See "Working with Layers" section for more.
- Touch-swipe. The slider's touch-swipe capabilities provides a native-like navigation experience on touch-screen devices. Swipe gestures are enabled for desktop devices as well.
- Fully Responsive. AP Smart LayerSlider is responsive by default. Not only the images will scale down, but the animated layers (where you can add any content) will be scaled down automatically as well.
- Fade Effect. In addition to swipe/slide transitions, AP Smart LayerSlider features a simple and elegant cross-fade transition between slides.
- Carousel Layout. The slider can show multiple slides in a carousel layout, by allowing you to set different sizes for the individual slide and for the whole slider.
- Chosen Image Folder. Use images from specific folder in admin, re-order and customize easily (custom title, desription, link).
- CSS-only controls All the navigation controls (i.e., arrows, bullets) are CSS-only (no graphics).
- Smart Video Support. Videos inside the slider will be controlled automatically. For example, when a video starts playing, the autoplay stops, or, when another slide is selected, the video stops.
- Thumbnails. Thumbnails can contain text, images or both. Also, they can be positioned at top, bottom, left or right of the slides. See "Select Theme" section for more.
- Lazy Loading. Enables the loading of images only when they are in a visible area, thus saving bandwidth and speeding up the initial page load.
- Infinite Scrolling (Loop). By default, the slides will be arranged in a loop, allowing infinite scrolling. This can also be disabled, however.
- Full Width and Full Window. The slider's size can be forced to fill the width or the window even when it's inside a container that would normally restrict it to expand.
- Auto Height. The height of the slider can be set to adjust automatically to the full height of the currently selected slide.
- Customizable Orientation. Both the orientation of the slides and the orientation of the thumbnails can be set to horizontal or vertical.
- Keyboard Navigation. Slides can be navigated by using the keyboard arrow keys. Also, if a slide contains a link it can be activated by using the Enter key.
- Rendering images via php resize (custom width/height.)
- Full-screen Support. The slider can be viewed in full-screen mode in all browsers that support the HTML5 Full Screen.
- Autoplay (autostrart) with custom time interval.
- Cross-Browser support. Works great in all the modern browsers.
- 5 Custom Styles included.
- Dynamic Images. Loads images from specific folder.
- HTML5 Images Uploader. You can upload multiple images into specific folder, using HTML5 uploader.
- Dynamic Content. Easily load content from your articles (i.e., article's image, title, descriptions, etc.). You can even combine multiple content types in the same slider.
Module Installation
In this tutorial we'll show you, how to install a Joomla module for Joomla! 3.x website. Installation steps are very similar to installation process of any Joomla! 3.x extension.
- Log into Joomla! 3.x Dashboard
Log in to the Administrator section of Joomla website. Access your site on the browser e.g http://www.mysite.com Type at your browser address bar e.g http://www.mysite.com/administrator.
- Select extension manager menu
At the top menu click at ExtensionsExtension Manager.
- Upload module file
At the "Upload Package File" tab, click to browse button, select the extension (zip file) which you want to install and then click Upload & Install.
"Successful" message should appear after clicking Upload & Install.
- Enable module
From the main Joomla menu click to ExtensionsModule manager. Use the Search or Filter feature to find module, and then click on the module. Change module status from unpublished to published and assign module to pages on which you want to see just installed module.
Source
Select the content source for module, weither you choose "Joomla Content" or "K2 Content", select the category. K2 source is very similar to Joomla source.
Source Joomla or K2 Content
- Source - Joomla or K2 Content


Creating slides is an easy as creating articles in Joomla. It is the "C A M" approach for publishing: Category Article Menu.
- Create a category in Joomla (K2).
- Create regular article(s) in your category.
- Select one image per article. This will be a slide's main image. Module will render only one image per article.
- Choose Joomla (or K2) category from AP Smart LayerSlider's admin“Source” tab.
- Create a menu where you will link this category (articles).
- Assign module to menu from “Menu Assigment” tab.
- Publish module.
- You're ready to go!
Note that AP Smart LayerSlider will render one image per article. This will be a main slide image. Later on, you can add more images as layers to the slide, explained more in "Working with Layers" section.
Don't forget to asign module, "Menu Assignment" in admin. When the module is published and module's position selected, your prepared content will show on your site as slider.
Same goes for K2 articles as for Joomla, just build articles with images in K2 and AP Smart LayerSlider will do the rest for you.
-
Use module in article(s) ~ shortcode
If you want to insert module (slider) into your content (article), there is a easy way to do it. Joomla 3 comes with a usefull plugin called "Load Modules" which enables module to appear in content (articles) where you want on the page. First check if "Content - Load Modules" plugin is enabled in your (Joomla) Plugin ManagerContent - Load Modules.
The best trick is to first assign your module to a "fake" position that is not existing in your template, but it will do the work. In your AP Smart LayerSlider module from "Module" tab"Position" (on the right), type any name you like (See this example modal).
"Content - Load Modules" loads Module positions within content and the syntax (shortcode) is {loadposition position1} or Modules by name, like {loadmodule mod_login}. Optionally can specify module style and for loadmodule a specific module title. To put it into your article where you want, just put this shortcode calling your position that you have already typed. So, if your module's position is layerslider then shortcode is {loadposition layerslider}.
Source Image Folder
This is the fastest way to create your slider. If creating articles sounds complicated for you, then "Image Folder" source is super easy, a matter of seconds. Select the content source for module, by choosing "Image Folder", set the image folder path. If you already prepared images in selected folder, AP Smart LayerSlider will render them all. If you don't have images in folder, then you can use Drag-and-drop uploader to upload multiple images at once.
- Select "Image Folder Path"
- Use Drag-and-Drop Uploader to upload images to slider
- Drag Image Use Drag image(s) to re-order as you like.
- Modal for "Edit" slide

See animated example bellow:

Click on the "Edit" to open Modal window. In this way you can setup Title, Caption and Description for each slide.

Slider Settings
Aplikko Smart LayerSlider module comes with a new easy-to-use admin. Using Aplikko's admin is giving you many options to config "Slider Settings", also includes your imagination to combine the settings as you like.
All Settings
-
Select Theme
Select Theme (style) for the slider
Style1 - responsive, touch-swipe, slides loop, text thumbnails, fade effect, animated layers.
The highlighted feature in this example is that it generates text thumbnails instead of image thumbnails (style3) or mixed thumbnail content (style5). Of course, all of these features can be controlled easily through module's admin.Style2 - full width, carousel layout, captions, responsiveness, touch-swipe, slides loop.
This example illustrates the possibility to arrange the slides in a carousel layout while also stretching the slider to the full width of the page. Even though the slider resides in a container that has a maximum width of 900px (for example), this feature makes it possible to have a full-width (or full-window) slider without making changes to the page's layout.Style3 - image thumbnails, fade effect, auto-scale layers, full-screen, touch-enabled.
The highlighted feature in this example are image thumbnails and full-screen support. Thumbnails can be positioned on top, right, bottom or left position.Style4 - video handling, mixed content, auto height, responsive, touch-swipe, auto-scale layers.
It is possible to load videos, text and any other HTML content. The video types or providers supported by this module are: YouTube, Vimeo, HTML5 and Video.js. Also, the videos will be controlled automatically, so if another slide is selected while the video is playing, the video will be stopped automatically. Also, when the video starts, the autoplay feature will be stopped.Style5 - mixed thumbnail content, vertical slides, captions, responsiveness, touch-enabled.
The highlighted feature in this example is mixed thumbnail content. Based on the slide width, thumbnails will adjust automatically, depending on where they are positioned. If thumbnails are on the left or right position, slider will then have re-calculated width (pixels) to fit into slide (with aspect ratio), and if thumbnails are on the top or bottom position the main image will take a full width of the slide. Also, if "Force Size" is set to "Full Width", it will still enlarge the slider with aspect ratio to fill the width (full stretch) by overflowing its parent elements. -
Slide Options
-
Slide Width
Sets the width of the slide. Can be set to a fixed value, for example: 900 (indicating 900 pixels). Default value: 1170.
-
Slide Height
Sets the height of the slide. The same rules available for the 'width' property also apply for the 'height' property. Default value: 300.
-
Render Image mode
If you want to use image mode which renders images (via php resize) from the image source, then choose CROP or RESIZE. Once they are rendered cached images will be in Joomla's “cache” folder. If set to “No” then images will be from original source (original dimensions and resolution). Notice that images will render upon opening the page (slider) on the front-end of your website. Default value: CROP.
-
Force Size
Indicates if the size of the slider will be forced to full width or full window. The “Force Size” property is useful when slider might be inside other containers which are less than full width/window. It will still enlarge the slider to fill the width or window by overflowing its parent elements. Default value: 'none'.
-
Visible Size
Sets the size of the visible area, allowing for more slides to become visible near the selected slide. If you set to '100%' other slides will become visible near the selected slide. If you set to 'auto', only the selected slide will be visible. Default value: 'auto'.
-
Slide Distance
Sets the distance (margin) between the slides. If set to 0, there will be no space between slides. If “Force Size” in parameters is set to “Full Width” and '“Visible Size'” is set to '100%', this margin will be visible. Default value: 10.
-
Responsive
Makes the slider responsive. The slider can be responsive even if the 'width' and/or 'height' properties are set to fixed values. In this situation, 'width' and 'height' will act as the maximum width and height of the slides. Default value: 'Yes'.
-
Image Scale Mode
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. Default value: 'Cover'.
-
Auto Height
Indicates if height of the slider will be adjusted to the height of the selected slide. Default value: 'No'.
-
Auto Scale Layers
Indicates whether the layers will be scaled automatically. Default value: 'Yes'.
-
Wait For Layers
Indicates whether the slider will wait for the layers to disappear before going to a new slide. Default value: 'No'.
-
Orientation
Indicates whether the slides will be arranged horizontally or vertically. Default value: 'Horizontal'.
-
Loop
Indicates if the slider will be loopable (infinite scrolling). Default value: 'Yes'.
-
Shuffle Slides
Indicates if the slides will be shuffled, in a randomized order. Default value: 'No'.
-
Show Full-screen button
Indicates whether the full-screen button is enabled. Default value: 'No'.
-
Fade Slides
Indicates if fade will be used. Module replaces the default slide/swipe transition with a fade transition. Default value: 'No'.
-
Fade Out Previous Slide
Indicates if the previous slide will be faded out (in addition to the next slide being faded in). Default value: 'Yes'.
-
Fade duration
Sets the duration of the fade effect. Default value: 500.
-
Autoplay
Indicates whether or not autoplay will be enabled. Default value: 'No'.
-
Interval (in milliseconds)"
Sets the delay/interval (in milliseconds) at which the autoplay will run. Default value: '5000' (5 seconds).
-
Autoplay On Hover"
Indicates if the autoplay will be paused or stopped when the slider is hovered. Default value: 'Pause'.
-
Slide Width
-
Thumbnail Settings
-
Show Thumbnails
Show or Hide Thumbnails. Default value: 'Yes'.
-
Thumbnail Width
Sets the width of the thumbnail within the slider. Default value: 100.
-
Thumbnail Height
Sets the width of the thumbnail within the slider. Default value: 80.
-
Text align (orientation)
Text align for Thumbnail text. Default value: 'Left'.
-
Show thumbnail description
Additional text (description) in thumbnails. Default value: 'Yes'.
-
Thumbnail description max characters
Maximum characters for the thumbnail description. Set 0 to hide. Set -1 to unlimited. Default value: 50.
-
Selected thumbnail text color
Custom 'selected' thumbnail text color.
-
Selected thumbnail background
Custom 'selected' thumbnail background color with alpha transparency (RGBA format).
-
Thumbnails Position
Sets the position of the thumbnail scroller. Default value: 'Bottom'.
-
Thumbnail Pointer
Indicates if a pointer will be displayed for the selected thumbnail. Default value: 'No'.
-
Thumbnail pointer color
Custom thumbnail pointer color.
-
Thumbnail Arrows
Indicates whether the thumbnail arrows will be enabled. Default value: 'No'.
-
Show Thumbnails
-
Arrows
-
Show arrows
Adds navigation arrows for the slides. Default value: 'Yes'.
-
Arrows size
Sets the size (font-size) for arrows. Since AP Smart LayerSlider doesn't use images for arrows, but webfont instead (icons - scalable vector graphics fonts), font-size is required. Default value: 50(px).
-
Arrows background color
Custom background color for navigation arrows, with alpha transparency (RGBA format).
-
Arrows color
Custom color for arrows.
-
Show arrows
Captions
-
Display captions
Allows you to add captions to slides. Captions will be displayed one at a time, below the slides. Show or Hide caption for each slide. Default value: 'No'.
-
Text align (orientation)
Text align for Captions. Default value: 'Center'.
-
Captions max characters
Maximum characters for the captions. Set 0 to hide. Set -1 to unlimited.Default value: 70.
-
Display captions
Video Options
AP Smart LayerSlider provides automatic control of the videos loaded inside the slider. For example, the video will pause automatically when another slide is selected, or, if the autoplay is running, it will be paused when a video starts playing.
-
Load Video.js
Loads javascript and css files for Video.js - HTML5 Video Player, open source HTML5 video player that supports HTML5 and Flash video, video playback on desktops and mobile devices. Default value: 'No'.
-
Reach Video Action
Sets the action that the video will perform when its slide container is selected. Default value: 'None'.
-
Leave Video Action
Sets the action that the video will perform when another slide is selected. Default value: 'Pause Video'.
-
Play Video Action
Sets the action that the slider will perform when the video starts playing. Default value: 'Stop Autoplay'.
-
Pause Video Action
Sets the action that the slider will perform when the video starts playing. Default value: 'None'.
-
End Video Action
Sets the action that the slider will perform when the video starts playing. Default value: 'None'.
-
Load Video.js
Working with Layers
AP Smart LayerSlider supports layers, which are blocks of text or HTML content that can easily be positioned, sized or animated.
Layers can be both animated and static and they can hold any HTML content like: text, links, buttons, images, DIVs, headings, etc. Also, layers can be scaled down automatically or with CSS. The very basic knowledge of HTML is required, but outcome could be eye-catching, dynamic and intelligent. You can imagine yourself as a director of short animation movie, releasing your creativity to create what you desire.
Simple layer example code:
<div class="sp-layer" data-position="centerLeft"> <!-- Some html content goes here --> This div is a simple layer </div>
As can be seen above, layer needs to have the sp-layer
class, but it can be any HTML element: paragraphs, headings, images, buttons or just DIV elements.
There are several predefined classes that can be passed to layers in order to style them.
Predefined classes:
-
sp-static
Sets the layer to be visible all the time, not animated.
-
sp-black
Adds a black and transparent background and makes the font color white.
-
sp-white
Adds a white and transparent background and makes the font color black.
-
sp-padding
Adds a 10 pixel padding to the layer.
-
sp-rounded
Makes the layer's corners rounded.
Example code:
<div class="sp-layer sp-static sp-black sp-padding" data-horizontal="50" data-vertical="50"> <!-- Some html content goes here --> This div is a simple "static" layer </div>
Multiple layers example code:
<!-- First layer --> <h3 class="sp-layer" data-position="bottomLeft" data-horizontal="10%" data-show-transition="left" data-show-delay="300" data-hide-transition="right"> <!-- Some html content goes here --> This heading is a first layer </h3> <!-- Second layer --> <p class="sp-layer" data-width="200" data-horizontal="center" data-vertical="40%" data-show-transition="down" data-hide-transition="up"> <!-- Some html content goes here --> This paragraph is a second layer </p> <!-- Third layer --> <div class="sp-layer" data-width="200" data-horizontal="center" data-vertical="60%" data-show-delay="2000" data-show-transition="down" data-hide-transition="up"> <!-- Some html content goes here --> This DIV is a third layer, with delay of 2 seconds (data-show-delay="2000") </div>
In example seen above, positioning and animation parameters are added with "data-attributes".
The position, size and animations are set using data attributes.
Data attributes:
-
data-width
Sets the width of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's width will adapt to the width of the inner content.
-
data-height
Sets the height of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's height will adapt to the height of the inner content.
-
data-depth
Sets the depth (z-index, in CSS terms) of the layer.
-
data-position
Sets the position of the layer. Can be set to 'topLeft' (which is the default value), 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight', 'centerLeft', 'centerRight' and 'centerCenter'.
-
data-horizontal
Sets the horizontal position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed or percentage value.
-
data-vertical
Sets the vertical position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed or percentage value.
-
data-show-transition
Sets the transition of the layer when it appears in the slide. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it appears.
-
data-show-offset
Sets an offset for the position of the layer from which the layer will be animated towards the final position when it appears in the slide. Needs to be set to a fixed value.
-
data-show-duration
Sets the duration of the show transition.
-
data-show-delay
Sets a delay for the show transition. This delay starts from the moment when the transition to the new slide starts.
-
data-hide-transition
Sets the transition of the layer when it disappears from the slide. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it disappears.
-
data-hide-offset
Sets an offset for the position of the layer towards which the layer will be animated from the original position when it disappears from the slide. Needs to be set to a fixed value.
-
data-hide-duration
Sets the duration of the hide transition.
-
data-hide-delay
Sets a delay for the hide transition.
-
data-stay-duration
Sets how much time a layer will stay visible before being hidden automatically.
The layers are animated using CSS3 transitions in most browsers. In IE9 and IE8 (where CSS3 transitions are not supported), the layers will only fade in/out, and in IE7 and older, the layers will appear without any animation.
Layer example code with (almost) all data-attributes:
<div class="sp-layer" data-width="340" data-height="200" data-position="centerCenter" data-horizontal="center" data-vertical="60%" data-show-transition="up" data-show-delay="1000" data-hide-transition="down" data-hide-duration="700" data-hide-delay="800" data-stay-duration="5000"> <!-- Some html content goes here --> This is a DIV with <span>some html content</span> <img src="path/to/some/image.png" /> </div>
Video Layers:
The video types or providers supported by this module are: YouTube, Vimeo, HTML5 or Video.js.
In order to have a video automatically controlled by the slider, the video must have the sp-video
class. Also, there are some provider-specific requirements for the videos, as presented below.
-
YouTube
YouTube videos can be loaded in two ways: by using a poster image with a link to the YouTube video or by inserting directly the video iframe provided by YouTube.
Example 1:
<div class="sp-layer" data-show-duration="500" data-show-delay="1000"> <a class="sp-video" href="//www.youtube.com/watch?v=7CVtTOpgSyY"> <img src="path/to/your/poster.jpg" width="500" height="350" /> </a> </div>
When using the second method, the videos will need to have the enablejsapi=1
parameter appended to the URL of the video. It's also recommended to append the wmode=opaque
parameter. The parameters need to be delimited by &
Example 2:
<iframe class="sp-video" src="//www.youtube.com/embed/7CVtTOpgSyY?enablejsapi=1&wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>
-
Vimeo
Just like YouTube videos, Vimeo videos can also be loaded by using a poster image or by inserting directly the video iframe.
Example 1:
<div class="sp-layer" data-show-duration="500" data-show-delay="1000"> <a class="sp-video" href="http://vimeo.com/109354891"> <img src="path/to/your/poster.jpg" width="720" height="400" /> </a> </div>
When using the second method, the videos will need to have the api=1
parameter appended to the URL of the video.
Example 2:
<iframe class="sp-video" src="http://player.vimeo.com/video/109354891?api=1" width="500" height="300" frameborder="0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-
HTML5
Simple HTML5 videos don't need any preparations other than having the
sp-video
class.
Example:
<video class="sp-video" poster="path/to/your/poster.jpg" width="500" height="350" controls="controls" preload="none"> <source src="path/to/your/video.mp4" type="video/mp4"/> <source src="path/to/your/video.ogv" type="video/ogg"/> </video>
-
Video.js
Each Video.js video must have a unique "id" attribute. Also, because the Video.js library changes the HTML markup of the video, we'll create a container element and add the
sp-video
class to that element instead. Also, the container element must have thedata-videojs-id
attribute, which is used to specify the 'id' attribute of the video.
Example:
<div class="sp-layer" data-horizontal="0" data-vertical="0"> <div class="sp-video" data-videojs-id="video1"> <video id="video1" class="video-js vjs-default-skin" poster="http://www.videojs.com/img/poster.jpg" width="1170" height="400" controls="controls" preload="none" data-setup="{}"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> <!-- track will load subtitles (captions) --> <track kind="captions" src="path/to/subtitles/captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> <!-- Additional paragraph if no javascript is enabled --> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video> </div> </div>
Please note that, in order to use Video.js, you need to load the Video.js JavaScript and CSS files in your module. See Load Video.js parameters in "Video Options" section for more. More information about how to use Video.js, in general, can be found on the official Video.js page.
Requirements
Server Requirements:
- Apache 2.0+ (2.2+ recommended)
- PHP 5.3.10+ (5.4+ recommended) * (PHP Safe Mode should be turned off)
- MySQL 5.1+ (5.1+ recommended)
- Joomla! 3+* (latest version recommended)
Browser Recommendation:
- Internet Explorer 9 and newer (IE7 & IE8 functionalities may be somewhat limited)
- Firefox 9 and newer
- Safari 5 and newer
- Chrome 17 and newer
- Opera 11.6 and newer
- JavaScript must be activated.
Need More Help?
If you couldn't find an answer for your question in this documentation, feel free to contact us . For technical support you can contact us through our contact page.