New navigation skins are downloadable for Layer Slider

As you probably know that Layer Slider already comes with 13 skins which means different navigation arrows, paginators and thumbnail styles. Now we would like to please our customers with 3 brand new skins as a gift. Each element of them are retina-ready so they will look awesome and incredibly sharp on high-res devices. Check the details!

How to use them?

First of all, you need to have the Layer Slider extension installed on your site, then you need to download the installation package of these new skins at the end of the article. After the download navigate to Extensions/Manage menu item of your Joomla! administrator area, browse for the downloaded file, and install it.

After that, you need to go to your sliders, click one for edit. In the Slider Settings, choose the Appearance tab. The first parameter will be the Skin, where you are now able to install the new ones:

• Outline
• Numbers
• Rounded flat

But there is even more!

We also made predefined hover style for the buttons in these 3 skins, which you can also see below. This means that you only need to set the href and add the ls-button class to the desired layer under Attributes tab, and you will have that hover effect.

ls-button class for hover effect

Outline

This skin can properly fit if your site's template is clear, and doesn't contain much colors. The arrow icons has a unique click animation, and the controller items area big enough to navigate between the slides on a mobile device.

Outline skin

And here you can see the hover effect for the buttons for this skin:

Hover effect for Outline skin

Numbers

As the title says, the slides are counted with this skin, and the control bar contains those numbers. This helps to easily identify the slides.

Numbers skin

The hover effect is a darker color in this case by default, but of course you can customize it, as you would like.

Hover effect for Numbers skin

Rounded flat

This skin contains flat elements for the navigation. It can be used on a wide-range of sliders, like photo slideshows, images with captions, etc. The hover color of this skin is easily adjustable in the Skin Editor of the Layer Slider. You can learn more about that in the followings.

Rounded flat skin

And the same hover color appears for the button:

Hover effect for Rounded flat skin

Skin Editor

You can reach the Skin Editor on your Joomla backend by Components/Layer Slider/Skin Editor. On the right corner, you need to select which skin's properties would you like to adjust. After you placed your modification, don't forget to press the blue Save changes button. Please also note that Built-in skins will be overwritten by update the Layer Slider. Permanent changes should be done through the Custom Styles Editor.

Custom Style Editor

This part of Layer Slider is available at Components/Layer Slider/Custom Style Editor. Here you can define your custom CSS modifications. Here you can add styles for layers, sliders or even a custom class you defined in the layer settings.

Closing words

Beyond that we would like to give something to express our thanks for the Layer Slider users, we also would like to show that how customizable, and easy-to-use extension the Layer Slider is, and how many power included in it. If you have some further tips or simply have a question, don't afraid to reach us by a comment here, or in a support ticket. Cheers!