Sliders

Make content sliders in Joomla!

  • Last updated: 30 Aug 2019
  • Version: 7.7.7
  • Types: System plugin Editor button plugin
  • Joomla rating: 100%

Examples for Sliders

Sliders is based on the Bootstrap collapse functionality. So Sliders uses and needs the Bootstrap framework (styles and scripts) that comes with Joomla core.
This means that Sliders will only function correctly if your Joomla 3 template allows the Bootstrap framework to be loaded and does not cause conflicts with the jQuery and bootstrap javascripts.

Simple set

Individually styled sliders

You can also use the Bootstrap classes info, success, warning and danger.

Sliders comes with ready-to-use solid and color_content classes you can combine with the above mentioned colour and state classes:

Custom styling

Styling the slider title

Icon class

Use the icon class on the sliders to show a or depending on the state of the slider

Opened/closed titles

Sliders closed by defualt

If you want to have all sliders closed, you can do this in 2 ways:
Either set the default First Slider option in the system plugin settings to Closed.
Or give the first slider the attribute open and give it the value false, like:

Default opened slider

You can also set any other slider to be the default open slider instead by adding the parameter open to that slider's tag and give it the value true, like:

{slider title="This slider is now open by default!" open="true"}

You do NOT have to give the first slider an open="false" if you give another slider open="true".

Page scrolling Pro only

You can set Sliders up to automatically scroll the page to the top of the slider when you open a slider by clicking on it, clicking on a sliderlink or linking to the slider via the url.

You can modify this behavior per slider by adding the scroll parameter and set it to false:

{slider title="Slider Title" scroll="false"}

And vice versa - if you have no page scrolling setup - you can change that per slider by adding the scroll parameter:

{slider title="Slider Title" }

Independent sliders

Nested sliders

You can nest sliders by giving the nested slider set extra names/ids.

To create nested sets, give the sliders of the nested set an extra name or id, like:

{slider-whatever}...{/sliders}

To prevent losing track of what closing tag closes what, you can optionally add the id to the closing tag too (but you don't have to), like:

{slider-whatever}...{/sliders-whatever}

Don't forget to close each slider set with the closing tag {/sliders}
If you don't close every set, you will get unwanted results.

Access restriction Pro only

You can set the access level to a certain slider with the access or usergroup parameter.

{slider title="This slider is only for visitors" access="Guest"}
    [TEXT]
{slider title="This slider is only for registered users" access="Registered"}
    [TEXT]
{slider title="This slider is only for Authors and Editors" usergroup="Authors,Editors"}
    [TEXT]
{/sliders}