Joomla rating: 100%

Sliders

Make content sliders in Joomla!

Version: 4.1.0   Type: PS PB   Compatibility: Joomla! 2 Joomla! 3

Joomla rating: 100%

Do you like Sliders?

Rate it!

Description

With Sliders you can make content sliders anywhere in Joomla!

Sliders are also known as 'collapses' or 'accordions'.

This is a slider!

This text right here is placed in sliders through Sliders.

The syntax simply looks like:

{slider Slider Title 1}

Your text...

{slider Slider Title 2}

Your text...

{/sliders}

You can use the editor button to place above example slide block.

Another slide

Hello :)

Free vs Pro

Free

Free

Enough functionality for most websites!

Unlimited access to free updates and support.

Features

  • Create stunning sliders
    • You can create sliders virtually anywhere you can enter text. So also in modules and other components.
  • Many styling options
    • Sliders is packed with ready-to-use styling options.
  • Fully stylable through CSS
    • For full control over the way the sliders are styled, you can use CSS. All Sliders elements have sufficient classnames to style it any way you want.
  • Click mode
    • Ability to make sliders open on mouse-click on slider title.

Free support

  • Access to Free forum
    • Get support for the extension.
      Response time aim: within 72 hours. Usually within 24 hours.
  • Install on multiple domains
    • You can install the extension on any domain you want. No limitations. No domain checks.
  • Open Source code
    • The code is open source (GPL), meaning there is no form of code encryption. No use of Zend Guard or ionCube.

Professional

 10

Need more? Get all Pro features and support.

1 year access to Pro updates and support.

Pro features

  • All features available in the free version, plus:
  • Hover mode
    • Ability to make sliders open when mouse hovers over slider title.
  • Set slide/fade speeds
    • Set the speed of the slider and fade effects.
  • Scroll to active
    • Make the browser scroll to the active slider or slider set.
  • Scroll offset
    • Make the browser slide to a given amount of pixels above or below the slider or slider set.
  • Use cookies
    • Store the active slider in the cookies so it remains open when visitor returns on page.

Pro support

  • Access to Pro forum
    • Get faster support for the extension.
      Response time aim: within 48 hours. Usually within 12 hours.
  • Pro downloads & updates
    • Get access to the Pro downloads and updates for a full year.
  • Install on multiple domains
    • You can install the extension on any domain you want. No limitations. No domain checks.
  • 30 Day money back guarantee
    • Not happy with the extension? Or simply have no use for it after trying out the Pro version? Simply ask your money back!
  • Open Source code
    • The code is open source (GPL), meaning there is no form of code encryption. No use of Zend Guard or ionCube.

Bundle offer

Get ALL NoNumber Pro extensions worth 375

And save 60%

1 year access to Pro updates and support.

 150 Buy a Bundle

Lifetime Bundle

Get LIFETIME access to ALL NoNumber Pro extensions.

And save loads

LIFETIME access to Pro updates and support.

 500 Buy a Lifetime Bundle

Tutorial

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).
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.
The Joomla 2.5 version of Sliders works differently to the Joomla 3 version.
The documentation here concerns the functionality available in the Joomla 3 version of Sliders.

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:

First Slider

Some text...

Second Slider

Some more text...

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

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 My Title|myclass}

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

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Blue

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Green

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Orange

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Red

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Grey

Cras dapibus.

Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{slider Default}
    [TEXT]
{slider Blue|blue}
    [TEXT]
{slider Green|green}
    [TEXT]
{slider Orange|orange}
    [TEXT]
{slider Red|red}
    [TEXT]
{slider Grey|grey}
    [TEXT]
{/sliders}

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

Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Success

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Warning

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Danger

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{slider Info|info}
    [TEXT]
{slider Success|success}
    [TEXT]
{slider Warning|warning}
    [TEXT]
{slider Danger|danger}
    [TEXT]
{/sliders}

Oldschool styling

First Slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Slider

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third Slider

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Blue

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Green

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Orange

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Red

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Grey

Cras dapibus.

Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus.

Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Success

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Warning

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Danger

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

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. Also the original LESS files are included in the /media/sliders/less folder.

Here are 2 examples of what you can do.

First Slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second Slider

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{slider First Slider|mystyle1}
    [TEXT]
{slider Second Slider|mystyle2}
    [TEXT]
{/sliders}

Here is the custom css used for these classes. This is the css syntax for the Joomla 3 version of Sliders.
(Scroll down for the Jooma 2.5 css)

/* Custom Style: mystyle1 */
.nn_sliders.accordion > .accordion-group.mystyle1 > .accordion-heading > a.accordion-toggle {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
  font-size: 22px;
  background-color: #ffc2c2;
  background-image: -moz-linear-gradient(top, #ff9999, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff9999), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #ff9999, #ffffff);
  background-image: -o-linear-gradient(top, #ff9999, #ffffff);
  background-image: linear-gradient(to bottom, #ff9999, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9999', endColorstr='#ffffffff', GradientType=0);
}
.nn_sliders.accordion > .accordion-group.mystyle1 > .accordion-heading > a.accordion-toggle:hover {
  background-color: #c2c2ff;
  background-image: -moz-linear-gradient(top, #9999ff, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9999ff), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #9999ff, #ffffff);
  background-image: -o-linear-gradient(top, #9999ff, #ffffff);
  background-image: linear-gradient(to bottom, #9999ff, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9999ff', endColorstr='#ffffffff', GradientType=0);
}
.nn_sliders.accordion > .accordion-group.mystyle1.active > .accordion-heading > a.accordion-toggle {
  background-color: #c2ffc2;
  background-image: -moz-linear-gradient(top, #99ff99, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#99ff99), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #99ff99, #ffffff);
  background-image: -o-linear-gradient(top, #99ff99, #ffffff);
  background-image: linear-gradient(to bottom, #99ff99, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff99ff99', endColorstr='#ffffffff', GradientType=0);
}
.nn_sliders.accordion > .accordion-group.mystyle1 > .accordion-body > .accordion-inner {
  border-top: none;
  background-color: #f5fff5;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#ccffcc));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #ccffcc);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffccffcc', GradientType=0);
}
/* Custom Style: mystyle2 */
.nn_sliders.accordion > .accordion-group.mystyle2 {
  -webkit-border-radius: 0 0 0 0;
  -moz-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
  border-color: #666;
}
.nn_sliders.accordion > .accordion-group.mystyle2 > .accordion-heading > a.accordion-toggle {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  padding: 8px 20px;
  background-color: #aaa;
  color: #fff !important;
}
.nn_sliders.accordion > .accordion-group.mystyle2 > .accordion-heading > a.accordion-toggle:hover {
  background-color: #999;
  color: #fff;
}
.nn_sliders.accordion > .accordion-group.mystyle2.active > .accordion-heading > a.accordion-toggle {
  background-color: #666 !important;
  color: #fff !important;
}
.nn_sliders.accordion > .accordion-group.mystyle2 > .accordion-body > .accordion-inner {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  border-top: none;
  background-color: #999;
  color: #fff;
}
.nn_sliders.accordion > .accordion-group.mystyle2.active > .accordion-body > .accordion-inner {
  background-color: #666;
}

The css syntax for the Joomla 2.5 version of Tabs is different:

/* Custom Style: mystyle1 */
div.nn_sliders_slider.mystyle1 a {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
  font-size: 22px;
  background-color: #ffc2c2;
  background-image: -moz-linear-gradient(top, #ff9999, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff9999), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #ff9999, #ffffff);
  background-image: -o-linear-gradient(top, #ff9999, #ffffff);
  background-image: linear-gradient(to bottom, #ff9999, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9999', endColorstr='#ffffffff', GradientType=0);
}
div.nn_sliders_slider.mystyle1 a:hover {
  background-color: #c2c2ff;
  background-image: -moz-linear-gradient(top, #9999ff, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9999ff), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #9999ff, #ffffff);
  background-image: -o-linear-gradient(top, #9999ff, #ffffff);
  background-image: linear-gradient(to bottom, #9999ff, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9999ff', endColorstr='#ffffffff', GradientType=0);
}
div.nn_sliders_slider.mystyle1.active a {
  background-color: #c2ffc2;
  background-image: -moz-linear-gradient(top, #99ff99, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#99ff99), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #99ff99, #ffffff);
  background-image: -o-linear-gradient(top, #99ff99, #ffffff);
  background-image: linear-gradient(to bottom, #99ff99, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff99ff99', endColorstr='#ffffffff', GradientType=0);
}
div.nn_sliders_content_wrapper.mystyle1 div.nn_sliders_content {
  border-top: none;
  background-color: #f5fff5;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#ccffcc));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 2500%, #ccffcc);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #ccffcc);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffccffcc', GradientType=0);
}
/* Custom Style: mystyle2 */
div.nn_sliders_slider.mystyle2 a,
div.nn_sliders_slider.mystyle2 a:hover {
  -webkit-border-radius: 0 0 0 0;
  -moz-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
  border-color: #666;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  padding: 8px 20px;
  background-color: #aaa;
  color: #fff !important;
}
div.nn_sliders_slider.mystyle2 a:hover {
  background-color: #999;
}
div.nn_sliders_slider.mystyle2.active a,
div.nn_sliders_slider.mystyle2.active a:hover {
  -webkit-border-radius: 0 0 0 0;
  -moz-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
  border-color: #666;
  background-color: #666 !important;
  color: #fff !important;
}
div.nn_sliders_content_wrapper.mystyle2 div.nn_sliders_content {
  -webkit-border-radius: 0 0 0 0;
  -moz-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
  border-color: #666;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  background-color: #666;
  color: #fff;
}

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.

Title with some styled text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Look, an image!

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Ṩῥἕcịᾳḻ ḈĦẚrḯḉṯɇṛş

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{slider Title with some styled text}
    [TEXT]
{slider  Look, an image!}
    [TEXT]
{slider Ṩῥἕcịᾳḻ ḈĦẚrḯḉṯɇṛş}
    [TEXT]
{/sliders}

Icon class

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

First slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second slider

Aenean commodo ligula eget dolor. Aenean massa.

Syntax

{slider First slider|icon}
    [TEXT]
{slider Second slider|icon}
    [TEXT]
{/sliders}

Active/inactive titles Pro only

You can have a different title when the slider is active and inactive using the title-active= and/or title-inactive= attribute.

This slider is now inactiveThis slider is now active

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

You can use the title-active= or title-inactive= attribute to override the default title in the tag. Or use both attributes. Doesn't really matter.

The 3 sliders in below example all have the same result. So choose whatever syntax method suites you best.

Indentation in example code is just for clarity. You should not indent your tags and text.

{slider This slider is now inactive|title-active=This slider is now active}
    [TEXT]
{/sliders}
{slider This slider is now active|title-inactive=This slider is now inactive}
    [TEXT]
{/sliders}
{slider title-active=This slider is now active|title-inactive=This slider is now inactive}
    [TEXT]
{/sliders}

Active slider

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

If you want to have all sliders closed, you need to give the first slider the attribute closed, like:

{slider First slider|closed}

First slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second slider

Aenean commodo ligula eget dolor. Aenean massa.

Third slider

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

You can also set any other slider to be the default active slider instead by adding the attribute active to that slider's tag, like:

{slider Not the first slider|active}

You do NOT have to set the first slider to closed if you set any other slider to active.

First slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This slider is now active by default!

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Another slider

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{slider First slider}
    [TEXT]
{slider This slider is now active by default!|green|active}
    [TEXT]
{slider Another slider}
    [TEXT]
{/sliders}

Link to sliders

You can link to sliders in different ways:

  • Sliderlinks
  • URL with hash tag
  • URL with slider variable

Sliderlinks

You can use the {sliderlink} tags to make links to sliders on the same page. Clicking on such a link will not reload the page, but simply open the appropriate slider (make that slider active).

The syntax is:

{sliderlink Title of the slider}Click here to open the slider{/sliderlink}

You can also use the alias of the slider instead of the title.

Open First SliderOpen Second SliderOpen Third Slider

Linked Slider 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Linked Slider 2

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Linked Slider 3

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{sliderlink Linked Slider 1}Open First Slider{/sliderlink} • {sliderlink linked-slider-2}Open Second Slider{/sliderlink} • {sliderlink open-third}Open Third Slider{/sliderlink}
{slider Linked Slider 1}
    [TEXT]
{slider Linked Slider 2}
    [TEXT]
{slider Linked Slider 3|alias:open-third}
    [TEXT]
{/sliders}

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 / active.

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

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!' active, 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 active.

To make the 3rd slider of the 2nd set active - 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 Slider Title|noscroll}

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

{slider Slider Title|scroll}

Normal Slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Scroll Slider

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{slider Normal Slider}
    [TEXT]
{slider Scroll Slider|scroll}
    [TEXT]
{/sliders}

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 closed 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 noscroll attribute to stop the page from scrolling to the sliders when you click to open them.

{slider Question 1|closed|noscroll}
Answer 1...
{/sliders}
{slider Question 2|closed|noscroll}
Answer 2...
{/sliders}
{slider Question 3|closed|noscroll}
Answer 3...
{/sliders}

Question 1

Answer 1...

Question 2

Answer 2...

Question 3

Answer 3...

Open/close all sliders

[icon-notification] This functionality is ONLY available in the Joomla 3 version!

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

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="openAllSliders()">+ openAllSliders</button>
<button class="btn btn-danger" onclick="closeAllSliders()">- closeAllSliders</button>

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

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example Slider 1

Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Example Slider 1.1

Example Slider 1.1.1

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Example Slider 1.1.2

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Example Slider 1.1.3

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Example Slider 1.2

Cras dapibus.

Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus.

Example Slider 2

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Phasellus viverra nulla ut metus varius laoreet.

Quisque rutrum.

Example Slider 2.1

Aenean imperdiet.

Etiam ultricies nisi vel augue.

Example Slider 2.2

Curabitur ullamcorper ultricies nisi.

Nam eget dui.

Etiam rhoncus.

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Syntax

Indentation in example code is just for clarity. You should not indent your tags and text.

{slider Example}
    [TEXT]
    {slider-ex Example Slider 1}
        [TEXT]
        {slider-ex_sub1 Example Slider 1.1}
            {slider-ex_sub1_sub1 Example Slider 1.1.1}
                [TEXT]
            {slider-ex_sub1_sub1 Example Slider 1.1.2}
                [TEXT]
            {slider-ex_sub1_sub1 Example Slider 1.1.3}
                [TEXT]
            {/sliders}
        {slider-ex_sub1 Example Slider 1.2}
            [TEXT]
        {/sliders}
    {slider-ex Example Slider 2}
        [TEXT]
        {slider-ex_sub2 Example Slider 2.1}
            [TEXT]
        {slider-ex_sub2 Example Slider 2.2}
            [TEXT]
        {/sliders}
        [TEXT]
    {/sliders}
{/sliders}

Access restriction Pro only

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

{slider This slider is only for visitors|access=Guest}
    [TEXT]
{slider This slider is only for registered users|access=Registered}
    [TEXT]
{slider This slider is only for Authors and Editors|usergroup=Authors,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

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.

Scroll to Top

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.
Scroll on Slidelinks If selected, the window will scroll to the top of the slider when a slider is opened via a sliderlink.
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.

Tag Syntax

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.
Slider Link Tag The word used for the slider link tags for sliders.

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

You can change the word if you are using another plugin that uses this tag syntax.
Tag Syntax Select whether to use a space or '=' in the tags to separate the tag name from the title. This also affects the link tags.

Advanced

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).
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
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.
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 arround the output of this extension.

These comments can help you troubleshooting 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.
Load Bootstrap Framework Disable to not initiate the Bootstrap Framework.

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

Joomla 3 vs Joomla 2.5 version

The Joomla 2.5 version of Sliders works differently to the Joomla 3 version.

The 2 versions are based on different JavaScript libraries, have a different html output and therefor have different css declarations.

If you upgrade from Joomla 2.5 to Joomla 3 and are using custom styling, you will need to re-write your css.

Feature Joomla 2.5 Joomla 3
JavaScript library MooTools jQuery / Bootstrap
Handle normal anchor links No Yes
Icon class No Yes
Active/inactive titles Pro only No Yes
Open/close all sliders No Yes
Automatically open parent tabs/sliders No Yes
Access restriction Pro only No Yes
Scroll offset Pro only No Yes
Active development No Yes

Installation

You can either install Sliders by using the core extension manager available in the Joomla! Administrator Control Panel, or by using the powerful NoNumber 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.

NoNumber Extension Manager

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

Please see the User Guide for the NoNumber 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 >> Extension Manager;
  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 >> Extension Manager;
  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

FAQs

The {slider} tags are not being converted

The Sliders plugin is not published

Check if the Sliders plugin is published. Go to Extensions >> Plugin manager and search for the system plugin System - NoNumber Sliders. Then publish it.

There is markup on the {slider} tags

It is fine to give styles to the titles within the {slider} tags, like: {slider My Title}
But giving styles to other parts of the tag, or the entire tag, can cause problems, like: {slider My Title}

If you have copy/pasted code directly into your editor, you might also have copied along hidden HTML tags. So this will also cause the {slider} tags to break:

{<span>slider</span>=...}

Remove the extra styling or other html tags around and in the {slider} tags that might cause problems.

Sliders are not working on all browsers

There are javascript errors

Javascript errors might and usually will cause the sliders to disfunction. You probably have a Mootools or jQuery conflict on your site. This often happens if multiple Mootools or jQuery scripts are loaded.

Take a look in the sites output html (ctrl-u) to check this.

For more details about the javascript error(s), you can use Firefox with the Web Developer Toolbar, Inspect Element console in Chrome, or any other browser with a javascript debugger.

Sliders are not working on Internet Explorer (but are working on other browsers)

There are problems in the html output structure of your website

Internet Explorer is pretty picky when it comes to html. It will not handle invalid markup gracefully.

Check if you have unclosed html tags in your content (see the html view in your editor), like divs or spans that have no closing tag, or lost closing tags without opening tag.

You can check your page for html errors on: http://validator.w3.org

Sliders with special characters are not working

You probably have a plugin installed that tries to optimize your html.

Extensions like 'RokBooster' and 'Content Optimizer' try to fix issues in your html. However they also mess around with the urls.

The thing that causes the issue s that these extensions url-encode special characters in urls. This is not good, seeing nowadays urls with special characters are and should be no problem.

So you will have to disable/uninstall these extensions to be able to use special characters in Sliders.

Another solution is to give the slider an alias without special characters, like:

{slider Ṩῥἕcịᾳḻ ḈĦẚrḯḉṯɇṛş|alias=special-characters}

The slider title is showing in the content area

Since version 4.0.0 for Joomla 3 the title is placed at the top of the content, but hidden. This is done for SEO purposes and to accompany the responsive view feature in the Pro version.

If you are using custom css styling, then your stylesheet probably doesn't have the css to hide the heading yet.

Simply add this css to your stylesheet:

.nn_sliders-title {
	display: none;
}

Installation

How can I install/upgrade Sliders?

You can either install Sliders by using the core extension manager available in the Joomla! Administrator Control Panel, or by using the powerful NoNumber 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.


Sliders won't install...

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

How can I uninstall Sliders?

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

If you no longer use any NoNumber extensions, you can also uninstall the NoNumber Framework plugin by using the Joomla! core extension manager.

What are the minimum requirements?

Sliders will only work correctly if your setup meets these requirements:

  • Up-to-date version of Joomla:
    • Joomla 2.5.10 or higher
    • Joomla 3.3.0 or higher
  • PHP 5.3.13 or higher
  • PHP mbstring (Multibyte String) functions enabled
  • MySQL 5 or higher

Important: I can only provide support for setups that:

  • meet the above requirements;
  • do not have extension files or Joomla! core files which have been altered in any way.

Where can I download earlier versions?

You have access to all previous free versions of all extensions on this website.

If you have a subscription to an extension, you can also download any previous pro version of any extension on this website.

If you do not have a valid subscription, you can download any pro version that is older than 1 year.

You can find old versions in the changelog.

Note: Please note that I am unable to provide support on old versions! (whether you have a subscription or not).

How can I downgrade to an earlier version of Sliders?

If for some reason you need to install an older version, it is best to uninstall the extension first.

You will also have to uninstall the NoNumber Framework system plugin.

After that you can simply install the older version zip file using the Joomla! installer.

Note: Please note that I am unable to provide support on old versions!

How can I upgrade from Joomla 2.5 to Joomla 3?

The upgrade of Joomla itself is a one-click process. But that just takes care of Joomla.

Many templates and extensions will not work the same or at all after upgrading to Joomla 3.

I personally advise against using the built-in upgrade process, and advise starting from scratch by installing a fresh copy of Joomla 3.

If you do want to upgrade Joomla 2.5 to Joomla 3, you will need to do this with regards to the NoNumber extensions you have installed:

  1. Disable or uninstall all NoNumber extensions.
    (Uninstalling NoNumber extensions will make you lose any global configuration settings for that extension. You will not lose any saved items)
  2. Upgrade Joomla 2.5 to Joomla 3.
  3. Re-install all NoNumber extensions you want installed.

For a detailed step-by-step migration process, see: https://docs.joomla.org/Joomla_2.5_to_3.x_Step_by_Step_Migration

Licensing

Under what license are NoNumber extensions released?

All free and paid NoNumber extensions are released under the Open Source GNU GPL v2.0 license.

See the Terms & Conditions for additional terms.

NoNumber Framework

What is the NoNumber Framework?

The NoNumber Framework is a Joomla! system plugin that is installed along with every NoNumber extension.

This plugin contains all the common functions and language strings that the NoNumber extensions use.

If you use any NoNumber extensions, this plugin must be installed and published. They will not function correctly or they will not function at all without it.

What is the NoNumber Elements plugin?

The NoNumber Elements system plugin is no longer used and has been replaced by the NoNumber Framework.

If you have been using NoNumber extensions for a long time you may still have this Elements plugin installed.

The NoNumber Elements plugin can safely be uninstalled IF your NoNumber extensions are up-to-date.

More Questions

I cannot find an answer to my question

Is there no answer to your question in this list, please try out these options:

  • General FAQs
    For general questions see the Pre-Sale Questions & Answers.
  • Tooltips
    All settings/options for the installed extensions have tooltips that explain what that setting is for. That should give you enough information to know how to use it.
  • Google
    Google is your friend! If you have some problem, get an error, have a question, try out Google. It usually gives you enough feedback to find an answer.
  • Forum
    For more specific questions or feedback, please use the Forum.

Changelog

+ Added   - Removed   ^ Changed   # Fixed

26-Feb-2015 : v4.1.0

Download Free

 ^ Updated translations: uk-UA
 ^ PRO Fixed issue with components select list only saving one value
 # J3 Fixed issue with activating sliders via url by name or number not working (only alias)
 # J3 Fixed issue with back button in browser going through url hashes
 # J3 Fixed usage of name instead of id attribute on anchor tags
 # J3PRO Fixed issue with javascript errors when using cookie option

14-Jan-2015 : v4.0.9

Download Free

 + J3PRO Added option to remove/keep plugin syntax on disabled components
 ^ Updated translations: et-EE, fr-FR, id-ID, lt-LT, sv-SE
 # PRO Fixed issue with disable on components option not working

08-Jan-2015 : v4.0.8

Download Free

 + Added option to enable iframe reloading (off by default)
 ! Removed compatibility for php versions under 5.3.13
 ! J3 Removed compatibility for Joomla 3 versions under 3.3.0
 # Fixed issue with Free version being able to be installed over the Pro version
 # J3 Fixed issue with scrolling to tab when going to hash url directly when scrolling is switched off

26-Nov-2014 : v4.0.7

Download Free

 # J3 Changed the way the transitions are added which should fix all the cross-browser compatibility issues with the javascript since v4.0.0

24-Nov-2014 : v4.0.6

Download Free

 # J3 Fixed issue with css issues on IE10+

21-Nov-2014 : v4.0.5

Download Free

 # Fixed issue with error about nnFile on installation on some setups
 # Fixed issue with javascript error about createStyleSheet on IE
 # Fixed issue with javascript error about insertRule on Firefox some setups

12-Nov-2014 : v4.0.4

Download Free

 # J3 Fixed issue with sliders not opening on IE9 again (grrrrrr!)

10-Nov-2014 : v4.0.3

Download Free

 # J3 Fixed issue with slider not closing when clicking on open slider

10-Nov-2014 : v4.0.2

Download Free

 # PRO Fixed issues with duplicate rows in update_sites table
 # J3 Fixed issue with sliders not opening on IE9 (grrr!)

28-Oct-2014 : v4.0.1

Download Free

 # J2FREE Fixed issue with javascript error about nn_sliders_urlscroll

25-Oct-2014 : v4.0.0

Download Free

 + Added handling of normal links to tabs to not reload the page
 + J3 Added ability to set a separate title-active and title-inactive
 + J3 Added opening of parent tabs and sliders when using an url hash to a nested text anchor
 + J3PRO Added ability to set an access restriction on sliders with the access= or usercroup= attribute
 ^ J3 Refactored code
 ^ J3PRO Improved handling of url hashes and opening of parent tabs and sliders
 # Fixed issue with plugin not being run over introtext/fulltext on onContentPrepare event
 # Fixed issue with plugin not working on jDownloads frontend view
 # J2PRO Fixed issue with page not scrolling when using url hashes
 # J3 Fixed issue with active by url/cookie not working when using caching
 # J3 Fixed issue with closeAllSliders function not working correctly
 # J3 Fixed issue with heading title not being placed in html for SEO purposes
 # J3 Fixed issue with icon class not working correctly on nested sliders

22-Sep-2014 : v3.5.7

Download Free

 ^ Improved handling of Google Maps
 # Fixed issue with php warning about Unknown modifier '.' in protect.php
 # J3PRO Fixed issue with special characters causing javascript issues when using cookies

20-Aug-2014 : v3.5.6

Download Free

 # Fixed issue with tags being converted in com_myjspace edit forms
 # J2 Fixed issue with errors after upgrade to Joomla 3

27-Jul-2014 : v3.5.5

Download Free

 # Fixed backwards compatibility with old syntax alias: (instead of alias=)

19-Jul-2014 : v3.5.4

Download Free

 # Fixed issue with NoNumber Framework not getting installed
 # Fixed issue with manifest cache (version and update info) not being updated

18-Jul-2014 : v3.5.3

Download Free

 # Fixed issue with fatal error when the NoNumber Framework is not installed

16-Jul-2014 : v3.5.2

Download Free

 # Fixed issue with alias not being overrideable
 # Fixed issue with first slide not working when title only contains an image

26-Jun-2014 : v3.5.1

Download Free

 # Fixed issue with custom editor button text not working
 # Fixed issue with enable in frontend editor button option not working

25-Jun-2014 : v3.5.0

Download Free

 ! J3 Removed compatibility for Joomla 3 versions under 3.2.2
 ^ Refactored code
 ^ Updated translations: pl-PL, pt-BR
 # PRO Fixed issue with error about in_array
 # J2 Fixed issue with errors after upgrade to Joomla 3
 # J3 Fixed issue with sliders not opening on url hash
 # J3 Fixed issue with tags not being handled in search results

21-May-2014 : v3.4.5

Download Free

 ^ Updated translations: et-EE, id-ID, nl-NL, sv-SE
 # PRO Fixed issue with sliders with special characters not working in hover mode

15-Apr-2014 : v3.4.4

Download Free

 ^ J3 Improved scrolling to named anchor links within tabs and opening parent sliders
 # Fixed issue with html structure issues when tags are directly inside html 5 elements

11-Apr-2014 : v3.4.3

Download Free

 + Added translations: id-ID
 ^ Updated translations: fr-FR
 # J3 Fixed issue with multiple active sliders when using url option

14-Mar-2014 : v3.4.2

Download Free

 ^ Updated translations: sl-SI
 # J3 Changed span element to anchor to be W3C compliant

26-Feb-2014 : v3.4.1

Download Free Download Pro (older than 1 year)

 # J2 Changed id of script div to have unique id to be W3C compliant
 # J2 Fixed issue with cookies not working properly

18-Feb-2014 : v3.4.0

Download Free Download Pro (older than 1 year)

 + J3PRO Added ability to set scroll offset
 ^ Changed way the url hash ids are created (no longer prepended with numbers)
 ^ Cleaned up some code (syntax)
 # Fixed issue with $ chars in titles
 # J2 Fixed issue with NN_PROTECTED tags being left in content

21-Jan-2014 : v3.3.6

Download Free Download Pro (older than 1 year)

 ^ Updated translations: nl-NL
 # Fixed issue with some missing language strings in some occasions
 # J2PRO Fixed issue with not being able to click (touch) to toggle when using hover mode
 # J3 Fixed issue with main classname being added to first slide
 # J3 Fixed issue with overlapping content when wider than slider content area
 # J3 Fixed some styling issues

27-Dec-2013 : v3.3.5

Download Free Download Pro (older than 1 year)

 + Added translations: hr-HR
 + J3 Added icon class that adds plus/minus icons
 + J3 Added openAllSliders and closeAllSliders javascript functions for custom use
 ^ Improved some code in NoNumber Framework which improves page load speed
 ^ J3 Changed focus style
 ^ J3 Updated translations: ca-ES, cs-CZ
 # Fixed installation error about duplicate entry on some MySQL 5.6 setups
 # J3 Fixed issue with floating elements in content overlapping the margin/border

07-Nov-2013 : v3.3.4

Download Free Download Pro (older than 1 year)

 # Fixed issue with tags in Sourcerer code being converted
 # Fixed issue with tags in some text and textarea fields being converted

21-Oct-2013 : v3.3.3

Download Free Download Pro (older than 1 year)

 ! Removed some redundant css
 # Fixed issue with javascript errors causing Sliders to stop functioning

16-Oct-2013 : v3.3.2

Download Free Download Pro (older than 1 year)

 # FREE Fixed issue with update failing due to false message about using old version from before Free/Pro

15-Oct-2013 : v3.3.1

Download Free Download Pro (older than 1 year)

 # FREE Fixed issue with javascript errors causing Sliders to stop functioning

15-Oct-2013 : v3.3.0

Download Free Download Pro (older than 1 year)

 + Added translations: bg-BG, et-EE, sv-SE
 + PRO Added option to disable on selection of components
 ^ Changed javascript minification to use Google Closure
 ^ Sets focus on slider title when activating slider via sliderlink or url
 ^ Updated translations: ca-ES, da-DK, el-GR, es-ES, fa-IR, fr-FR, it-IT, pt-PT, ro-RO, ru-RU, uk-UA, zh-TW
 # Fixed issue with opening tags not being converted on some setups
 # Fixed issue with tags not being handled when site has invalid html structure
 # Fixed issue with tags sometimes appearing in title tags and title attributes
 # J3PRO Fixed issue with cookies not working

08-Aug-2013 : v3.2.0

Download Free Download Pro (older than 1 year)

 ! J2 Removed compatibility for Joomla 2.5 versions lower than 2.5.10
 ! J3.0 Removed compatibility for Joomla 3 versions lower than 3.1.0
 ^ J2 Converted images in (editor) buttons to font icons
 ^ J2 Improved minification of js files
 # Improved the way the urls on the links are created (full url + hash)
 # J2 Fixed issue with outline setting having effect when Old School styling is not selected
 # J3 Fixed issue with editor button not getting styled correctly on TinyMCE

11-Jun-2013 : v3.1.4

Download Free Download Pro (older than 1 year)

 ^ Improved minification of js files
 ^ Updated translations: de-DE, pl-PL

15-May-2013 : v3.1.3

Download Free Download Pro (older than 1 year)

 # Fixed issue with tags not being 'unprotected'

15-May-2013 : v3.1.2

Download Free Download Pro (older than 1 year)

 # Fixed issue with sliderlinks not working in article when slider set is in a module
 # Fixed issue with sliders being converted in some admin forms when plugin is enabled for admin side
 # J2 Fixed issue with a document.write script conflicting with other scripts, like modals
 # J3 Fixed issue with links inside the slider titles messing up layout
 # J3 Fixed issue with remembering active slider by cookies not working

22-Apr-2013 : v3.1.1

Download Free Download Pro (older than 1 year)

 # Fixed issue with installation manifest details not updating
 # Fixed issue with update manager not seeing latest version (caused by manifest)
 # J3FREE Fixed issue with error about undefined property slide_speed

18-Apr-2013 : v3.1.0

Download Free Download Pro (older than 1 year)

 + Added ability to enable the plugin in the administrator side (no guarentees on effects)
 + J3 Added slide speed setting
 ^ Improved code
 # Fixed issue with dollar signs in the slider titles
 # Fixed issue with heading tags in the slider titles messing up the html structure

28-Mar-2013 : v3.0.7

Download Free Download Pro (older than 1 year)

 + Added classes and rel attribute to the Slider Links
 ^ Changed messaging on installation on unsupported Joomla versions
 ^ Cleaned up some code (syntax)
 ^ Updated translations: fr-FR
 # Fixed issue with spaces arround classes/attributes in tag causing it to fail

13-Mar-2013 : v3.0.6

Download Free Download Pro (older than 1 year)

 + J2 Added bottom margin to slide sets
 # J3 Fixed typo in override paths in comment in css files

04-Mar-2013 : v3.0.5

Download Free Download Pro (older than 1 year)

 # J3 Fixed issue with Tabs not working when bootstrap css is not loaded when using old style

28-Feb-2013 : v3.0.4

Download Free Download Pro (older than 1 year)

 ^ Updated translations: zh-TW
 # J3 Fixed issue with Sliders not working when bootstrap css is not loaded
 # J3 Fixed issue with browser scrolling to anchor when scrolling by url is off

24-Feb-2013 : v3.0.3

Download Free Download Pro (older than 1 year)

 + Added classes primary (same as blue) and error (same as warning)
 + J3 Added styling for better cross-template compatibility
 ^ Improved less/css markup
 ^ Updated translations: nl-NL, sl-SI

09-Feb-2013 : v3.0.2

Download Free Download Pro (older than 1 year)

 # FREE Fixed issue with php warnings about undifined properties use_cookies and set_cookies
 # J3 Fixed issue with errors in javascript on pages where Sliders is not used

08-Feb-2013 : v3.0.1

Download Free Download Pro (older than 1 year)

 # FREE Fixed issue with errors in javascript

08-Feb-2013 : v3.0.0

Download Free Download Pro (older than 1 year)

 + J2 Added classes info, success warning and danger
 + J2 Added classes orange and red
 + J2 Added less files for generating css files
 + J2 Added new styling based on Bootstrap (moved old styling to old.css)
 + J3 Added Joomla 3 support
 ! J1.5 Removed Joomla 1.5 support
 ! J2 Removed rounded and radius styling options
 ! J2 Removed some redundant css styles being applied in output
 ^ Changed default syntax from {slide=...} to {slider ...}
 ^ Renamed extension from Slider to Sliders
 ^ Updated translations: lt-LT, pt-BR, th-TH
 ^ J2 Canged location of certain options
 ^ J2 Changed default slide and fade speeds to 250 (=faster)
 ^ J2 Minified css and js files
 # J2 Fixed issue with colons in titles being replaced by [[e]]

02-Jan-2013 : v2.2.2

Download Free Download Pro (older than 1 year)

 # Fixed issue with language file not loading

29-Dec-2012 : v2.2.1

Download Free Download Pro (older than 1 year)

 ! J2 Removed versioned media files option
 # J2 Fixed error about XML setup file on first install

22-Dec-2012 : v2.2.0

Download Free Download Pro (older than 1 year)

 ^ J2 Cleaned up code
 ^ J2 Moved media files to Joomla media folder
 # J2 Fixed issue with errors with Phoca PDF

21-Sep-2012 : v2.1.5

Download Free Download Pro (older than 1 year)

 # Fixed issue with slides not working when title contains a comma
 # Fixed issue with tags being handled in edit for of jcal, jevent and some others

06-Sep-2012 : v2.1.4

Download Free Download Pro (older than 1 year)

 ^ Adds hash to url when mode is hover too
 # Fixed issue with handling of dollar signs in the titles

20-Jul-2012 : v2.1.3

Download Free Download Pro (older than 1 year)

 # Fixed issue with certain titles returning empty (since v2.1.1)

19-Jul-2012 : v2.1.1

Download Free Download Pro (older than 1 year)

 ! Removed ability to install on Joomla 1.6 and 1.7
 ! Removed ability to install on setups with php 5.2 or lower
 ^ Cleaned a lot of code
 ^ Updated translations: es-ES, nl-NL
 # Fixed issue with tags being interpreted inside the Josetta form
 # PRO Fixed issue with page jumping to top in hover mode

01-May-2012 : v2.1.0

Download Free Download Pro (older than 1 year)

 ^ Increased page load speed by changing how xml files are loaded

26-Apr-2012 : v2.0.5

Download Free Download Pro (older than 1 year)

 + Added translations: fa-IR
 # Fixed issue with javascript error on IE7

17-Apr-2012 : v2.0.4

Download Free Download Pro (older than 1 year)

 + Added translations: zh-TW
 ^ Improved protecting of edit forms to only protect fields (so tags work outside form fields)
 ^ Updated translations: da-DK

13-Apr-2012 : v2.0.3

Download Free Download Pro (older than 1 year)

 # Fixed issue with scripts not getting loaded if tags are only used outside content are

12-Apr-2012 : v2.0.2

Download Free Download Pro (older than 1 year)

 # Fixed issue with multiple same titled slides on same page not working

10-Apr-2012 : v2.0.1

Download Free Download Pro (older than 1 year)

 # SECURITY FIX: Fixed URL injection vulnerability in NoNumber Framework

07-Apr-2012 : v2.0.0

 + Added ability to set the alias in the tag via |alias:... (used for urls)
 + Added translations: ar-AA, ar-SA
 ^ Changed layout of settings
 ^ Changed some language strings
 ^ Cleaned up code syntax
 ^ Improved handling of other plugin style tags inside the {slide} tag
 ^ Now available as Pro and Free version
 ^ Updated translations: de-DE
 # Fixed issue with dollar signs not appearing in output
 # Fixed issue with mootools being loaded on pages even when not necessary

05-Mar-2012 : v1.8.6

 ^ Cleaned up code syntax
 ^ Updated translations: pt-BR, pt-PT
 # J1.5 Fixed issue with image-only tab titles

26-Jan-2012 : v1.8.5

 + Added translations: pl-PL
 # Fixed issue with Slide links not working with slides with special characters
 # Fixed issue with image-only tab titles (thanks to Justin Niebuhr)
 # Fixed issue with installer not removing the folder/zip from the tmp
 # Fixed issue with links not working correctly on all setups due to not using JRoute
 # [J1.7+] Fixed issue with errors on pdf pages

09-Jan-2012 : v1.8.4

 # Fixed issue with line-height of the slide titles being jumpy on some templates

16-Dec-2011 : v1.8.3

 ^ Cleaned up more code
 ^ Updated translations: de-DE, ru-RU
 # Fixed issue with html entities in title converting to url hash
 # Fixed issue with invalid w3c html markup (ref attribute in div element)

18-Nov-2011 : v1.8.2

 + Added option to overrule mode by adding click or hover in tag
 ^ Updated translations: sl-SI
 # Fixed issue with hash fragment still being added to url when option is switched off

09-Nov-2011 : v1.8.1

 + Added option to overrule the default code the editor button inserts
 ^ Improved cleanup of scripts/styles when there are no tabs on the page
 # Fixed issue with hash fragment links not working in all urls with variables
 # Fixed issue with typo in css file (.grey instead of .mystyle)

06-Nov-2011 : v1.8.0

 + Added active slide as hash fragments to url (and option to switch this off)
 + Added translations: th-TH
 ^ Cleaned code syntax (no longer guaranteed support for php 5.2.x and lower)
 ^ Improved cleanup of scripts/styles when there are no slides on the page
 ^ Improved matching of titles with special characters via url
 # Fixed issue with tags being handled in some edit forms

17-Oct-2011 : v1.7.1

 # Fixed issue with w3c validator giving false negatives on html output
 # Fixed security issue in NoNumber Framework plugin

08-Oct-2011 : v1.7.0

 + Added ability to set slides up to change on mouse hover instead of click
 ^ Cleaned up some code (like no more use of DS)
 ^ Improved installer
 ^ Moved translation language files to main package (no more language packs)
 # Fixed issue with tags being handled in editor button popup
 # Fixed issue with the slidelink tag not working outside the area where the slides are

16-Sep-2011 : v1.6.0

 ^ Changed NoNumber Elements plugin to NoNumber Framework
 ^ Changed way MooTools version is detected
 ^ Improved handling of surrounding whitespace
 ^ Improved initial display before script is loaded/executed
 ^ Moved common language strings to NoNumber Framework files
 # Fixed issue with class names showing in print view
 # Fixed issue with invalid characters in element ids (not passing w3c validation)
 # Fixed issue with javascript files breaking when using js/css compression

29-Jul-2011 : v1.5.2

 # Fixed issue with surrounding html tags potentially breaking html structure

21-Jul-2011 : v1.5.1

 + Added option to not use outlines
 + Added option to use versioned scripts and stylesheets
 ^ Improved handling of styling on tags
 ^ Improved handling of tags in feeds
 # Fixed issue with error on servers that don't have mbstring functions enabled
 # Fixed issue with some content not being rendered correctly in inactive slides

05-Jul-2011 : v1.5.0

 + Added cookie support for remembering active tabs
 ^ Changed layout of options
 ^ Changed use of elements
 ^ Improved handling of print and pdf pages
 # Fixed issue with JEventHandler error on some setups
 # Fixed issue with images and other html in titles
 # Fixed issue with inactive content showing shortly before page is loaded

06-Jun-2011 : v1.4.2

 # Fixed issue with slides using custom ending tag no longer working (since v1.4.1)
 # Fixed version number

06-Jun-2011 : v1.4.1

 + Added option to define the tag type used for the titles
 + Added option to overrule the window sliding per slide
 ^ Added better handling of tags when closing tag is not found
 # Fixed issue with file inclusion not working on some Joomla 1.5 setups

23-May-2011 : v1.4.0

 + Added more comments to css file
 + Joomla 1.7 compatible!
 ! Removed force mootools 1.2 option
 ^ Changed way the mootools version is detected
 # Fixed issue with setting active item via number / set in url not working correctly

30-Mar-2011 : v1.3.2

 + Added option to activate slide via url using the number of the slide
 # Fixed issue plugin being executed on raw format pages
 # Fixed issue with bottom border line sometimes disappearing
 # Fixed issue with problems when html has multiple body tags
 # Fixed issue with slides being handled on print page
 # Fixed some styling issues

28-Feb-2011 : v1.3.1

 ^ Changed language files to be J1.6 ready
 # Fixed issue with html tags in title messing up code
 # Fixed issue with leading/trailing spaces/enters on tags creating unwanted whitespace
 # Fixed issue with second tab not opening correctly when first slide is a link

18-Feb-2011 : v1.3.0

 + Added name of slide to url status when hovering over slide label
 + Added option to switch off scrolling to slide on url (and option to overrule by adding a + after the slide)
 + Added possibility to link slides to other pages
 # Fixed issue with tags being interpreted in frontend editor fields with very large contents

11-Feb-2011 : v1.2.0

 + Added ability to nest slides
 + Added extra class to style content for before script is loaded or fails
 + Added scrolling to slide on url (and option to not scroll by adding a - after the slide)
 ^ Besides {slide=, now {slides= will also work as tag
 ^ Changed extension icon / logo
 # Fixed issue with leading/trailing spaces in the tab titles
 # Fixed issues with tab matching when using tab number
 # Fixed issues with tab matching with special characters
 # Fixed some issues with loading problems on IE

13-Dec-2010 : v1.1.1

 # Fixed issue with conflicting characters in language file

10-Dec-2010 : v1.1.0

 + Added option to not force load MooTools 1.2 ready script
 + Added option to not load core MooTools script
 + Added option to set line color in settings
 + Added option to set rounded border radius in settings
 # Cleaned up some code
 # Fixed issue with elements showing outside content area on IE7
 # Fixed issue with javascript errors on IE7
 # Fixed issues with document being called to early
 # Fixed some issues with loading of language strings

03-Dec-2010 : v1.0.3

 # Fixed issue with elements showing outside content area on IE
 # Fixed issue with setting active slides via url not working with all Cyrillic characters
 # Fixed issue with slider speed setting not working (and causing php notice)
 # Fixed issue with slides not working on IE8
 # Fixed some file encoding stuff

26-Nov-2010 : v1.0.2

 # Fixed issue with slides not working in IE

25-Nov-2010 : v1.0.1

 ^ Changed script to make active state of slide bar change after slide
 # Fixed language string of ROUNDED_CORNERS

25-Nov-2010 : v1.0.0

 + Added checks to see if NoNumber Elements plugin is installed/enabled
 + Added classes to content to enable styling per slide
 + Added option to scroll to top of slide(s) when opened
 + Added option to set rounded corners on/off
 + Added scrolling on slide links {tablink=...}
 ^ Changed default slide effect speed
 ^ Changed stylesheet a bit
 ^ Fixed and updated all language strings
 # Fixed issue with fade effect not working for MooTools 1.2
 # Fixed issue with tags being handled in edit fields
 # Fixed issues with fade effect when switching between slides very fast

16-Nov-2010 : v0.3.0

 # Fixed extension causing pages to break on some setups
 # Fixed issue with not working in some forms (where they should)

15-Nov-2010 : v0.2.3

 + Added fade effect and option to set speed of it
 # Fixed issue with tabs not being handled outside component area
 # Fixed some css styling issues

12-Nov-2010 : v0.2.2

 + Added option for indenting both title and content
 + Added option to make slide active by number in url (slide=2)
 # Fixed issue with active slides when using Cyrillic titles
 # Fixed issue with extra styles not working when using indentation
 # Fixed issue with multiple classes in tag

11-Nov-2010 : v0.2.1

 # Fixed issue with editor buttons messing up html with some editors
 # Fixed issue with some tags being handled in editor field

09-Nov-2010 : v0.2.0

 + Added option to select tag delimiter '=' or space
 + Added option to set indenting of slide title or content (or none)
 ^ Made sliding effect a little smoother
 # Fixed issue with 'closed' option not working
 # Fixed issue with script not working with MooTools 1.2

08-Nov-2010 : v0.1.0

 + First beta release
		

Reviews

Post a review

Functionality

I use Sliders since they introduced. I can directly add the code in the view.html.php or in article or simply anywhere in Joomla.

Ease of use

regardless where you apply this change, it works simply great.

Support

I never had a chance reaching out to support as this product doesnt need one. It is designed in such a way that you dont need to reach out.

Documentation

Clear Documentation

Functionality

Sliding parts of content in and out of view

Ease of use

Installation and use are easy. Good options in plugin. Coloring etc via stylesheet. Some knowledge of css helps a lot.

Support

Great! Especially Pro-support is very quick and to the point.

Documentation

Documentation in plugin, good support by forum, FAQ etc.

Functionality

You can do anything you imagined about sliders with this extension

Ease of use

Very easy to use by putting shortcodes directly in your articles to divide the content in sections...

Support

I had to contact the author and he responded within an hour ; he solved my problem quickly

Documentation

Extensive documentation about using the shortcodes and settings...
But the css should be more documented to make style customization easier.

Functionality

Very flexible as far as adding images, styling and other enhancements.

Ease of use

Simple inline coding for some customizations. CSS needed for some styling.

Support

Unbelievably good. I had a template conflict. Developer surmised what the template problem was and I got it fixed. He knows coding!!

Documentation

Good. Could use examples of exactly where to place what in the inline customization.

Functionality

Works very well, does what I expected it to do (and much more!)
Might buy the pro version just to support them.

Ease of use

Wonderfull, installed and working within five minuts.

Support

Did not need support, which is the best support you can have.

Documentation

Very, very clear.

Functionality

Hands down this is the best accordion slider I found. You can link to a tab from which opens it directly, this is so freaking cool. The settings for opening and raising the page to the top showing all tabs or the focused slider is to icing on the cake!! Of course the Pro version is the way to go.

Ease of use

Dead simple to use. A editor button will add the code and you can just add new sliders in a copy paste for as many as you need.

Support

NoNumber support is one of the best out there. Fast and helpful. Some patches are made and sent in hours then updated in the release in a day or less.

Documentation

This is huge for extensions, many are confusing and lacking current versions, etc. NoNumber is quite the opposite, always up to date and very thorough. Not to mention easy to understand.

Tabs (another great nonumber product) works really well at organizing content in sensible bites that your visitor can manage.

Sliders really stands out if you need Long Titles and/or lots and lots of content!

As easy to work with and customize as Tabs and has the same awesome support.

Another Well Done!
This is not the first review NoNumber, but I come back to this manufacturer again and again. What makes NoNumber, namely active Slider is absolutely incredible and convenient! Truly facilitates work and helps to make a very beautiful and functional sliders.

Separately want to see the highest level of support. Response speed is impressive, and I was not left alone with the question as long as I fully got what he wanted. Thanks for the great work to expand and for the excellent support !!!
I am using Sliders in a blog list setup where I show the readmore details within a slider. I could use the slider tags also in my template code, not only in my Joomla articles.

Peter is great in giving support in his forum - of course in the Pro Forum, but also in the free one!

I love to use his extensions - they just work easily and without bugs!!!
The Sliders is a great extension, like all extensions of nonumber, and the support in the forum are very good. With Sliders and 2 tags you can to create a good sliders for order your content ;)

See more reviews

Post a review

Reviews are taken from the Joomla Extensions Directory website.

Translations

Sliders comes packed with the following languages:

English (United Kingdom)
100%
Arabic (Unitag)
10%Translate
Arabic (Saudi Arabia)
10%Translate
Bulgarian (Bulgaria)
13%Translate
Catalan (Spain)
86%Translate
Czech (Czech Republic)
26%Translate
Danish (Denmark)
68%Translate
German (Germany)
91%Translate
Greek (Greece)
24%Translate
Spanish (Spain)
89%Translate
Estonian (Estonia)
15%Translate
Persian (Iran)
89%Translate
French (France)
100%
Indonesian (Indonesia)
100%
Italian (Italy)
58%Translate
Lithuanian (Lithuania)
100%
Dutch (Netherlands)
96%Translate
Polish (Poland)
96%Translate
Portuguese (Brazil)
96%Translate
Portuguese (Portugal)
82%Translate
Romanian (Romania)
70%Translate
Russian (Russia)
91%Translate
Slovenian (Slovenia)
96%Translate
Swedish (Sweden)
15%Translate
Thai (Thailand)
91%Translate
Ukrainian (Ukraine)
100%
Chinese (Taiwan)
90%Translate

No language pack for your language?