Sliders

Make content sliders in Joomla!

  • Last updated: 06-Jul-2018
  • Version: 7.6.1
  • Types: System plugin Editor button plugin
  • Joomla rating: 100%
Joomla rating: 100%

Do you like Sliders?

Rate it!

Tutorial for Sliders

There is a Free and a Pro version of Sliders.
The parts in this tutorial that only concern the Pro version will be marked with: Pro only

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.

Introduction

Sliders is a Joomla! system plugin (and editor button plugin) that allows you to display content to your visitors in sliders.

How to use it (syntax)

Using Sliders is pretty simple and straightforward. You just place {slider} tags around the text (rich content) that should show up in sliders.
You don't need to go into html view, you can use this right in your WYSIWYG editor.

Every block of content should be preceded with a starting {slider} tag, like:

{slider Title of the slider}

And place a closing {/sliders} tag after the last slider content block.

A simple slider set with 2 sliders would look like:

{slider First Slider}

Some text...

{slider Second Slider}

Some more text...

{/sliders}

This is the result:

Note: Sliders is most stable and reliable if you place each {slider} tag on its own new paragraph line.

Extra parameters

Further on in this tutorial you will see you can control how each slider and slider-set works by adding extra parameters.

The syntax of these parameters looks like name="value", which you might recognise from how html works.

As soon as you add parameters, you will need to place the slider title in a parameter too, like:

{slider title="First Slider" alias="first" class="myclass"}

You may also place the title in a title parameter when not having extra parameters. So these will both work:

{slider First Slider}
{slider title="First Slider"}

Editor Button

You can enter the {slider} tags directly into your content. However, to save time typing and remembering what the exact syntax is, Sliders comes with a handy editor button.

You can use this editor button (located below the text input area) to place an example Sliders tag block in your article (or other editor fields).

After inserting the example code, you can change it in your editor to whatever you desire.

You can customize the default example code in the Sliders system plugin settings.

Styling

Individually styled sliders

The sliders - by default - have a tasteful and neutral styling.

To add an extra class to a slider (for styling purposes), you can use:

{slider title="My Title" class="myclass"}

Sliders' stylesheet comes with styling for the classes blue, green, orange, red and grey.

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

If you have sufficient CSS knowledge you can also add your own classnames and styling via CSS.

Take a look at the stylesheet that comes with Sliders in: /media/sliders/css/style.css

You can overrule the Sliders stylesheet by copying it or creating your own in: /templates/[YOUR TEMPLATE]/css/sliders/style.min.css

That way you can fully customize the styling of the sliders.

Please note that the css in the style.min.css is compressed (minified). To get the not-minified css, look in the style.css. But Sliders will load the file named style.min.css, regardless of whether the css inside that file is minified or not.
The original LESS files are included in the /media/sliders/less folder.

Here are 2 examples of what you can do.

Styling the slider title

Sliders allows you to style the title you place in the {slider} tag - right inside the tag. So you can make it bold or another font or even place images in there.

Icon class

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

Note: This does require the Sliders stylesheet and the Icomoon font styling to be loaded.

Opened/closed titles

You can have a different title when the slider is opened and closed using the title-opened and/or title-closed attribute.

Default opened slider

All sliders closed

By default the first slider in a slider set will be the open slider.

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:

{slider title="First slider" open="false"}

Specific slider opened

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

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

Note: You do NOT need to give the first slider an open="false" if you gave another slider open="true".

Random slider opened Pro only

With the Pro version, you also have the ability to make a different slider open randomly every time the page is refreshed. This would allow to present different content when the page is revisited.

You can do so by placing an open="random" paramater to the first slider in the set, like:

{slider title="First Slider" open="random"}
...
{slider title="Second Slider"}
...
{/sliders}

Try refreshing this page and see the opened slider in this set being random every time.

Hover Mode Pro only

With the Pro version sliders can also be triggered by hovering over the slider handles. This can be set as the default behaviour, or overrule it via the mode attribute in the tag.

Link to sliders

You can link to sliders in different ways:

  • URL with hash tag
  • URL with slider variable

URL with hash tag

By default, clicking on a slider will add a hash tag to the url, like:
www.mydomain.com/some/page#my-slider

When visiting that url directly, the page will automatically be loaded with slider 'My Slider' as open.

You can switch off the option to automatically add the hash tag in the Sliders system plugin settings.

The slider alias that is placed in the url hash tag is based on the title of the slider. You can set this alias to anything you want by adding an alias attribute to the tag, with this syntax:

{slider title="My Slider" alias="my-alias"}

Then the url will look like this:
www.mydomain.com/some/page#my-alias

Keep in mind that the alias should be unique. Otherwise only the first slider on the page with that alias will be set as open.

URL with slider variable

Alternatively you can also force a slider to open via a variable in the url :
www.mydomain.com/index.php?option=com_content&view=article&id=123&slider=Slider Title 2
or
www.mydomain.com/some/page?slider=slidertitle2

You can use the title of the slider in different formats, such as lower case, spaces, special characters, etc.
So to make the slider 'It's cool!' open, you can use any of these in the url:

  • slider It's cool! or slider It's%20cool!
  • slider It'scool!
  • slider its-cool
  • slider itscool

If you have given the slider a custom alias (as described above under URL with hash tag), you can use that as well:
slider my-alias

You can also simply use the number of the slider (1, 2, etc).
So if this is the 3rd slider you can also use:
slider=3

If you have multiple slider sets on the page, that will only make the 3rd slider of the first set on the page open.

To make the 3rd slider of the 2nd set open - for instance -you can use:
slider=2-3

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 noscroll attribute:

{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 attribute:

{slider title="Slider Title" }

Independent sliders

You can make sliders independent by simply making each slider an own set. This method can be used for stuff like FAQ pages where you want to be able to have multiple sliders open at the same time.

Because the first slider in a set is opened by default, you should add the open="false" attribute to every slider if you want them closed when the page displays.

If you have set up the page scrolling in the Sliders system plugin settings, you can add the scroll="false" attribute to stop the page from scrolling to the sliders when you click to open them.

{slider title="Question 1" open="false" scroll="false"}
Answer 1...
{/sliders}
{slider title="Question 2" open="false" scroll="false"}
Answer 2...
{/sliders}
{slider title="Question 3" open="false" scroll="false"}
Answer 3...
{/sliders}

Open/close all sliders

If you want to open or close all the sliders on the page, you can use the available javascript functions openSliders and closeSliders.

You can make your own custom links or buttons to trigger these functions. Or call them via some custom javascript.

<button class="btn btn-success" onclick="openSliders()">+ openSliders</button>
<button class="btn btn-danger" onclick="closeSliders()">- closeSliders</button>
You can also open or close specific sliders by using giving the html id of the slider to the function.
This can be an id of an individual slider, or the id of an element that contains multiple sliders you want to open / close.
<button onclick="openSliders('slider-cats')">
Open slider "Cats"
</button> <button onclick="closeSliders('section-animals')">
Close all sliders inside "section-animals"
</button>

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 tab with the access or usergroup parameter. You can also exclude access by placing a ! before the value.

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

Settings

Sliders is packed with options, giving you control over how the sliders look and behave. Here is the full list of the options you can find in the Sliders system plugin settings:

Styling

Load Stylesheet Select to load the extensions stylesheet. You can disable this if you place all your own styles in some other stylesheet, like the templates stylesheet.

Behaviour Pro only

Mode Select whether the sliders should change on mouse click or hover.
Slide Speed The speed of the slide effect in milliseconds. Set to 0 for no effect.
First Slider Set the default state of the first slider.

Options: Opened, Closed

Scroll to Top Pro only

Scroll to Top If selected, the window will scroll to the top of the first slider when a slider is opened.

When 'To Slider' is selected, it will scroll to the top of the actual active slider.

Options: No, Yes, To Slider
Scroll on Links If selected, the window will scroll to the top of the slider when a slider is opened via a link.
Scroll by URL If selected, the window will scroll to the top of the slider when a slider is opened via the URL. You can overrule this option by adding a minus (-) to the end of the slider name in the URL.

If not selected, you can overrule this and make the page scroll by adding a plus (+) to the end of the slider name in the URL.
Scroll offset The scroll offset in pixels. If this is set to a negative number, the browser will scroll to a point above the slider. This can be useful when your website has a floating top menu.

Advanced Settings

Opening Tag The word used for the opening tags for sliders.

By default this is 'slider'. So an opening tag looks like:
{slider My Slider Title}

You can change the word if you are using another plugin that uses this tag syntax.
Closing Tag The word used for the closing tag for sliders.

By default this is 'sliders'. So an closing tag looks like:
{/sliders}

You can change the word if you are using another plugin that uses this tag syntax.
Tag Characters The surrounding characters of the tag syntax.

Note: If you change this, all existing tags will not work anymore.

Options: {...}, [...], {{...}}, [[...]], [:...:], [%...%]
Title tag This is the tag type used for the slider titles. These tags will be hidden when the sliders are generated, but will be visible on pages where the sliders are not handled (like on the print page or on browsers that do not support javascript).

Can be overridden with the title_tag="..." attribute in the {slider} tag.
Use Hash If selected, the active slider can be set via the hash fragment in the URL (#my-slider-title) and will be added to the URL when a slider is activated
Reload Iframes Select to make the iframes reload the first time the slider it is in gets activated. Only use this when you have iframes that cause issues when loaded in closed sliders.
Initialise Delay Set the delay in milliseconds to initialise the Sliders script after pageload. You can use this to make Sliders initialise after other scripts that may require this to function.
Use Cookies If selected, the active sliders will be stored in the cookies and will remain active when page is revisited.
Save Cookies If selected, the active sliders will be stored in the cookies. Enable this if you want to use this information in other custom scripts.
Disable on Components Select in which frontend components NOT to enable the use of this extension.
Remove in Disabled Components If selected, the plugin syntax will get removed from the component. If not, the original plugins syntax will remain intact.
Enable in administrator If enabled, the plugin will also work in the administrator side of the website.

Normally you will not need this. And it can cause unwanted effects, like slowing down the administrator and the plugin tags being handled in areas you don't want it.
Place HTML comments By default HTML comments are placed around the output of this extension.

These comments can help you troubleshoot when you don't get the output you expect.

If you prefer to not have these comments in your HTML output, turn this option off.
Use Media Versioning Select to add the extension version number to the end of media (js/css) urls, to make browsers force load the correct file.
Load Bootstrap Framework Disable to not initiate the Bootstrap Framework.

Tabs needs the Bootstrap Framework to function. Make sure your template or other extensions load the necessary scripts to replace the required functionality.

Editor Button Options

Button Text This text will be shown in the Editor Button.
Enable in frontend If enabled, it will also be available in the frontend.
Use Simple Button Select to use a simple insert button, that simply inserts some example syntax into the editor.
Maximum number of Sliders Set the maximum number of sliders shown in the editor button popup window. Increasing this number can cause that window to take longer to load.

Options: 5, 10, 20, 30
Use Custom Code If selected, the Editor Button will insert the given custom code instead.
Custom Code Enter the code the Editor Button should insert into the content (instead of the default code).


Not compatible


Advanced Template Manager is NOT compatible with these (and maybe other) templates and template frameworks:



  • Gantry (RocketTheme)

  • JoomlaXTC

  • T3 (JoomlArt)

  • Warp (YooTheme)

Installation

You can either install Sliders by using the core extension manager available in the Joomla! Administrator Control Panel, or by using the powerful Regular Labs Extension Manager.

Note: When updating Sliders, you do not need to uninstall it first. The package will update all the files automatically.

Keep in mind that when you update to a major new version (or uninstall first), you might lose some configuration settings.

Regular Labs Extension Manager

It is very easy to install/update any Regular Labs Extension using the Regular Labs Extension Manager.

Please see the Tutorial for the Regular Labs Extension Manager for more detailed information...

Joomla! Extension Manager

To install via the Joomla! Extension Manager, just follow these steps:

  1. Log into your Joomla administrator;
  2. In the menu, choose: Extensions >> Extensions;
  3. Choose the tab: Install from Web (or enable it if you haven't done so yet);
  4. Select the search field and enter Sliders and hit enter;
  5. Click on the Sliders listing;
  6. Click on Install;
  7. Click on Install to confirm.
Joomla! Installer - Install from Web

Or if you need to install the Pro version or cannot install via the 'Install via Web' method for some reason:

  1. Download the extension install file (.zip);
  2. Log into your Joomla administrator;
  3. In the menu, choose: Extensions >> Extensions;
  4. Choose the tab: Upload Package File;
  5. Click on the Choose File button and select the extension zip;
  6. Click on Upload & Install.
Joomla! Installer - Upload Package File

If you have problems installing Sliders, please try the manual installation process as described here: docs.joomla.org/Installing_an_extension