JS Layer Slider
Joomla! 30
Version: 1.0 Release Date: 11 August 2016
1 vote

JS Layer Slider is an innovative, responsive Joomla! Slider Plugin that displays your content the beautiful way. The visual, drag & drop editor will let you tell your own stories in no time!
 

$12.00



The module provides a simple-to-use and powerful back-end. It helps you easily design slides and manage screenplay.

  • Extremely powerful Visual Layer Editor
  • Easily create your own layout
  • Easily manage screenplay
  • 60+ Built-in Animations
  • Support many useful elements: Headings, Custom HTML, Image, Buttons, YouTube video, Vimeo video and 500+ built-in icons for various use purpose.

 

Fully Responsive

You can specify which elements are shown or hidden on specific devices. This helps to make slider look awesome on full range of devices from computer to mobile.



 

Module Settings

  • Load Bootstrap:If Yes, the plugin will load bootstrap framework. Note: if your template is not based on bootstrap framework, you might face with some issues of responsive like element hidden or shown in correctly on specific devices as you designed in backend, enable this setting to fix the issue.
  • Interval: The amount of time to delay between automatically cycling an item. If 0, Slider will not automatically cycle.
  • Wrap: Whether the Slider should cycle continuously or have hard stops.
  • Show Controls: Determines whether to use control arrows for the slides to move right or left.
  • Show Indicators: If Yes, there is a small cỉlces of slide loading icon while loading is in progress
Viewport settings
  • Maximum Screen Width: Specifies the maximum width of a content area.
  • Padding Top: Sets the top padding (in pixel)
  • Padding Bottom: Sets the top padding (in bottom)
config-slider.jpg
config-slider-explanation.jpg

Global Background Settings

This section is used to set global background for whole landing page. You can change the background of each page in page setting sections (See Manage Slides section).

  • Background: Select a background image.
  • Background Color: Select the background color of page
  • Background Video: Set background video by entering a YouTube Video ID or YouTube Video URL. This global video background is always AUTO PLAY and HIDE CONTROLS.
  • Start At: Specific part of a video on YouTube to play.
  • Stop At: Specific part of a video on YouTube to stop
  • Mask Image:Select Mask Image over background.
  • Mask Color :Select Mask Color over background.
background-v3.jpg

Manage slides

Edit slide screen

  • config-slide.jpg

Enable slide

  • The module supports to create up to 10 slides. You can specify which slides are shown by changing the value of "Enable Slide" field (#1 on image) to "Yes".

Set background of slide

  • You can set background image or background color for the slide

Set background of slide

  • You can set background video, image or background color for the slide

Set mask over background

  • You can frame background slide in a seasonal theme with a quick and easy way to mask images using a transparent mask PNG and mask color

Edit slide content

Sort slides

  • You can change the ordering of slides by updating value of Ordering field (#4 on image). A slide with lower displaying order is shown before a slide with greater displaying order.

Visual Layer Editor

Screen explanation

slide-editor.jpg

  • 1- Toolbar
  • 2 - Editor
  • 3 - Object
  • 4 - Object’s properties form
  • 5 - Responsive Design
  • 6 - Toggle Background Color
  • 7 - View / Apply Code

Create an Object

  • Drag and drop elements from Toolbar to Editor to create an Object

Update Object’s properties

  • Drag an object to change its position.
  • Click on edges or bottom right corner of object and drag to change its size.
  • Click on Object or label of object to open setting form on right side of Editor where you can update its properties. Once you update object’s properties, click on Apply button to save changes.

Remove an Object

  • Click on Object or label of object to open setting form on right side of Editor.
  • Click on Remove button on property form to remove an object.

Duplicate an Object

  • Click on Object that you want to duplicate.
  • Click on Duplicate button to quickly clone an object.

Edit visibility of Object

Click on Object or label of object to open setting form on right side of Editor then Click on Visibility Tab

  • z-index: specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
  • Opacity: The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
  • Class Suffix: A Suffix to be applied to the CSS class of Object. This allows individual element styling.
  • Background Color: Select the background color of an Object.
  • Border Width: Specify the width of the border of an Object. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
  • Border Style: Specifies which style of border to display.
  • Border Color: Set the color of the border
  • Border Radius: Add rounded borders to element.
  • Desktop: If enabled, an Object will be shown on desktop devices (screen size is 980px and up). Otherwise, it will be hidden.
  • Tablet: If enabled, an Object will be shown on tablet devices (screen size is between 768px and 979px). Otherwise, it will be hidden.
  • Mobile: If enabled, an Object will be shown on mobile devices (screen size is 767px and below). Otherwise, it will be hidden.
  • TIP: Double click on label of object to toggle object visibility. This helps you can update object that is hidden by other objects.
edit-visibility.jpg

Responsive Design

Clicks on buttons in a button group below a Visual Layer Editor to displays only elements what are shown on selected device.
This feature helps you can design for specific devices easier.

responsive-design.gif

Edit animation of Object

Click on Object or label of object to open setting form on right side of Editor then Click on Animation Tab

  • Animation: Select an animation effect when object appear.
  • Duration: Defines how many milliseconds an animation takes to complete one cycle.
  • Delay: Specifies a delay (in milliseconds) for the start of an animation.
edit-animation.jpg

View Code

Click on View Code button at the bottom of Editor to toggle (show or hide) textarea that contains editor" source code.
This feature is useful if you want to quickly create a new page based on current ones. In this case you can follow steps listed below:
  • Copy source code of editor in the page that you want to edit from
  • Paste it into textarea (what contains source code of editor) of new slide. NOTE: you must clear all code in target textarea if any before paste new code into.
  • Click on Apply Code button to let Editor render code to objects

Toogle Background Color of Editor

You now can turn ON/ OFF background color of layer editor via a Toggle button

Important note

With Element type Image: Dimension of Editor screen is fixed 960px x 420px, and content of slide will be resized depends on screen size of user's device (Example: If width of Object is 200px in Editor, It will be resized to 400px on devices with screen width is 1920px (= 2x of Editor's width)). So if you use an image with SMALL size, it won't fill element's width on large devices. If you face this issue, You need to replace the image with a larger one.
 



 

SOME INTESRESTING NUMBERS ABOUT OUR TEAM

22916

Awesome Customers

Loving our products!

552172

Products downloaded

Fast and simple

15

Beautiful products

In our boutique

4g

Caffeine Consumed

While working