TC Responsive Layer Slider Documentation

TC Responsive Layer Slider is a fully responsive and device friendly slider which works perfect in all major devices. TC Responsive Layer Slider is layer slider as well, with the ability of adding any HTML contents (texts, DIVs, headings, images, videos, etc.) in layers.

Main 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.
- 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. TC Responsive Layer Slider 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.
- 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.
- 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.
- Auto Height. The height of the slider can be set to adjust automatically to the full height of the currently selected slide.
- 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.
- 5 Custom Styles included.
- Dynamic Images. Loads images from specific folder.
- HTML5 Uploader. You can upload multiple images into specific folder, using HTML5 uploader.
- Dynamic Content. Easily load content from your Joomla or K2 articles (i.e., article\'s image, title, descriptions, etc.). You can even combine multiple content types in the same slider.

How to Install?
1. Download TC Responsive Layer Slider Module package from the downloads area of Themechoice.com.
2. After downloading the zip file, log into your Joomla admin.
3. Go to Extensions > Manage.
4. Select the Upload Package File tab and select your downloaded zip file.
5. Click the upload and install button.
6. You should see a success message stating that 'Installation of the module was successful'.

Source Setting

TC Responsive Layer slider support 3 content source:
1. Image Folder:
2. Joomla Content:
3. K2 Content:
Image Folder:

Using Image Folder source you can easily create slider. Select the content source for module, by choosing "Image Folder", set the image folder path. If you don't have images in selected folder, then you can use Drag-and-drop uploader to upload multiple images at once. Following screenshot showing how to create a slider using Joomla image folder.

If you click on edit button of a image, it will popup a window. Into popup window, you can set slide title, caption, Description((into description you can add slider description text, div and layers). If you will check following screen you will get it.)

Joomla or K2 Content:

For TC Responsive Layer Slider, Joomla or K2 Content source almost same. By following steps you can create slider using Joomla/K2.
- 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 this module admin > "Source" tab.
Try to check the following screenshot for setting Joomla/k2 Source:

Joomla Content Source:

K2 Content Source:

This module will render one image per article. This will be a main slide image. Later on, you can add more images as layers

Slider Setting

In TC Responsive Layer Slider have following Options for setting the slider.
- Select Theme .
- Slide Options .
- Thumbnail Settings .
- Arrows .
- Buttons .
- Captions .
- Video Options .
Try to check the following screenshot of slider setting:

Playing with Layers

TC Responsive Layer slider 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.

Layer needs to have the "sp-layer" class, but it can be any HTML element: paragraphs, headings, images, buttons or just DIV elements.

Simple layer example code:

<div class="sp-layer" data-position="centerLeft">
    <!-- Some html content goes here -->
    This div is a simple layer
</div>

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.

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.

Example using predefined classes:

<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 -->
<h1 class="sp-layer sp-white sp-padding " data-position="topCenter" data-vertical="30%" data-show-transition="left" data-show-delay="1000" data-hide-transition="right" data-hide-duration="700" data-hide-delay="800" data-stay-duration="4000">
   Content Slider With Layers
</h1>
<!-- Second layer -->
<p class="sp-layer sp-white sp-padding"  data-position="topCenter" data-vertical="50%" data-show-transition="left"
data-show-duration="900" data-show-delay="1200" data-hide-transition="right" data-hide-duration="700" data-stay-duration="5500" data-width="700" style="text-align:center;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.massa.
</p>
<!-- Third layer -->
<div class="sp-layer"  data-position="topCenter" data-vertical="75%" data-show-transition="left"
data-show-duration="900" data-show-delay="2200" data-hide-transition="bottom" data-hide-duration="700" data-stay-duration="6500" style="text-align:center;">
<a href="#" class="btn btn-success  btn-lg ">Read More <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
</a></div>

Layer example code with 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 -->
         Content Slider With Layers
   <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 Video example code:

<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="images/poster path/1.jpg" width="840" height="373" />
    </a>
</div>

YouTube Video example code using iframe:

<div class="sp-layer" data-show-duration="500" data-show-delay="1000">
<iframe class="sp-video" src="//www.youtube.com/embed/HnbMYzdjuBs?enablejsapi=1&amp;wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>
</div>

Vimeo Video example code:

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

Vimeo Video example code using iframe:

<div class="sp-layer" data-show-duration="500" data-show-delay="1000">
   <iframe class="sp-video" src="http://player.vimeo.com/video/84021939?api=1" width="840" height="373" frameborder="0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

HTML5 Video example code:

<div class="sp-layer"  data-horizontal="0"  data-vertical="0">
<video class="sp-video" poster="images/tc_responsive_layer_slider/theme4/3.jpg" width="840" height="373" controls="controls" preload="none">
    <source src="video path/diamonds.mp4" type="video/mp4"/>
    <source src="video path/diamonds.ogv" type="video/ogg"/>
</video>
</div>

Video.js Video example code:

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 the data-videojs-id attribute, which is used to specify the 'id' attribute of the video.

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

Documentation