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:

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.

  1. 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.

  2. Select extension manager menu

    At the top menu click at ExtensionsExtension Manager.

  3. 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.

  4. 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

  1. 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.

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.


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.

  1. Select "Image Folder Path"

  2. Use Drag-and-Drop Uploader to upload images to slider
  3. See animated example bellow:


  4. Drag Image
  5. Use Drag image(s) to re-order as you like.


  6. Modal for "Edit" slide
  7. 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

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.

Where is the placeholder for layers? It is Joomla or K2 article description, or "Description" where the Source is "Image Folder".

( See example modal )


There are several predefined classes that can be passed to layers in order to style them.

Predefined classes:

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:

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.




Requirements

Server Requirements:


Browser Recommendation:



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.