User Guide

Sliders

Download Free Buy Pro   € 10

1) What is Sliders?

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

2) 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 slide}

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.

Note: The synatx has changed since version 3. If you have updated from version 2 and you have issues with the tags, see the FAQs: The tags are not working after update from version 2.x to 3.x

3) Editor Button

You can enter the Sliders 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.

4) Styling

4.1) 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}

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.min.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/siders/less folder.

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 Custom styling|myownstyle}

CSS for this particular custom styling:

/* 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;
}

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

Syntax:

{slider Title with some styled text}

credits Look, an image!

Syntax:

{slider credits Look, an image!}

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

And special characters work too.

Syntax:

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

PS: If you have problems with special characters, it means you have issues with the character type settings on your server and/or dasliderase. Please ask your host about it.

5) Active slide

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

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

{slider First Slide|closed}

First slide

First slider is closed by default.

Second slide

....

Third slide

....

 

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

{slider Not the first slide|active}

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

So if you want the second slider to have the title 'My Cool Stuff!' to be active by default, and give it a green style:

{slider My Cool Stuff!|green|active}

First slide

...

My Cool Stuff!

....

Another slide

....

 

6) Link to sliders

You can link to sliders in different ways:

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

6.1) 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 slide}Click here to open the slide{/sliderlink}

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

Open First Slider - Open Second Slider - Open Third Slider

Slider1

...

Slider2

...

Slider3

...

6.2) 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-slide

When visiting that url directly, the page will automatically be loaded with slider 'My Slide' 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 slide. 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.

6.3) 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=SliderTitle 2
or
www.mydomain.com/some/page?slider=slidetitle2

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!
  • 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

7) 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 slidelink or linking to the slider via the url.

You can modify this behavior per slider by adding the noscroll attribute:

{slider SliderTitle|noscroll}

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

{slider SliderTitle|scroll}

Normal Slider

...

Scroll Slider

...

8) Nested sliders

Nested sliders

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

Syntax

This is a nested slider.

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}

Example syntax

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

{slider Level 1 - First}
    This is the fist slider
    {slider-level2 Level 2 - First}
        First nested slider
    {slider-level2 Level 2 - Second}
        Second nested slider
    {/sliders}
{slider Level 1 - Second}
     Second main slider
{/sliders}

Example

You can nest slider sets multiple levels deep, if you would ever want/need this for any reason.

Example Slider1

Some text...

Example Slider1.1

Example Slider1.1.1

Some text...

Example Slider1.1.2

Some text...

Example Slider1.1.3

Some text...

Example Slider1.2

Some text...

Example Slider2

Some text...

Example Slider2.1

Some text...

Example Slider2.2

Some text...

 

The syntax used for above sliders:

{slider-ex=Example Slider1}
    Some text...
    {slider-ex_sub1 Example Slider1.1}
        {slider-ex_sub1_sub1 Example Slider1.1.1}
            Some text...
        {slider-ex_sub1_sub1 Example Slider1.1.2}
            Some text...
        {slider-ex_sub1_sub1 Example Slider1.1.3}
            Some text...
        {/sliders}
    {slider-ex_sub1 Example Slider1.2}
        Some text...
    {/sliders}
{slider-ex=Example Slider2}
    Some text...
    {slider-ex_sub2 Example Slider2.1}
        Some text...
    {slider-ex_sub2 Example Slider2.2}
        Some text...
    {/sliders}
{/sliders}

Notice!

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.

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

10) 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:

10.1) Tag Syntax

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

By default this is 'slide'. So an opening tag looks like:
{slide=My Slide 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 slides.

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

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.

10.2) 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.
Indentation J2.5 ONLY Select whether to indent the slide title or content or not. Indenting means it gets a margin to the left and right.

You can override this setting per tab with the class attributes noindent, indenttitle, indentcontent & indent, like: {slide=Slide Title|indentcontent}
Use outline J2.5 ONLY Select to have lines around the slide labels and content.
Line Color J2.5 ONLY Select the color (RGB) of the lines around the slide labels and content

10.3) Behaviour PRO ONLY

Mode Select whether the slides should change on mouse click or hover.
Slide Speed J2.5 ONLY The speed of the slide effect in milliseconds. Set to 0 for no effect.
Fade In Speed J2.5 ONLY The speed of the fade effect in milliseconds. Set to 0 for no effect.
Fade Out Speed J2.5 ONLY The speed of the fade effect in milliseconds. Set to 0 for no effect.

10.4) Scroll to Top PRO ONLY

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

When 'To Slide' is selected, it will scroll to the top of the actual active slide.
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 slide when a slide is opened via the url. You can overrule this option by adding a minus (-) to the end of the slide 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 slide name in the url.

10.5) Editor Button Options

Button Text This text will be shown in the Editor Button.
Show Button Icon J2.5 ONLY If selected, the icon will be displayed 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).

10.6) Advanced Options

Title tag This is the tag type used for the slide titles. These tags will be hidden when the slides are generated, but will be visible on pages where the slides are not handled (like on the print page or on browsers that do not support javascript).
Use Hash If selected, the active slide can be set via the hash fragment in the url (#my-slide-title) and will be added to the url when a slide is activated
Use Cookies
PRO ONLY
If selected, the active slides will be stored in the cookies and will remain active when page is revisited.
Save Cookies
PRO ONLY
If selected, the active slides will be stored in the cookies. Enable this if you want to use this information in other custom scripts.
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 Core MooTools J2.5 ONLY Select to load the core MooTools script. You can disable this if you experience conflicts if your template or other extensions load their own version of MooTools.
Load Bootstrap Framework J3 ONLY Disable to not initiate the Bootstrap Framework.

11) Updating from v2 to v3

There have been some major changes between version 2.x and 3.x. These impact the way it works and how it is styles.

If you update Sliders from a version before 3.0.0, then please take not of the following changes.

The name

The name has been changed from 'Slider' to 'Sliders'. This in itself will probably not matter to you much, but it does impact some other stuff (tag syntax and classnames).

The tag syntax

The syntax has changed since version 3. When updating, Sliders tries to take over your previous settings. But if you never saved the old plugin settings, it has nothing to go by and will use the new syntax as default.

You can go into the Sliders system plugin settings and set the tag syntax up like it was in version 2. Or you can use DB Replacer to replace the old syntax with the new one.

In the new syntax, the seperator is a space instead of a '='.

Old version 2 syntax:

Slider tag: {slide=...}...{/slides}
Link tag: {slidelink=...}...{/slidelink}

New version 3 syntax:

Slider tag: {slider ...}...{/sliders}
Link tag: {sliderlink ...}...{/sliderlink}

Styling

Version 3 comes with a completely new styling, based on the Bootstrap sliders. You can still switch to the old version 2 styling in the Sliders system plugin styling.

Location of the stylesheet

If you have custom CSS for styling the Sliders, then the location of the stylesheet should be changed.

Sliders now uses the media folder for the stylesheets. This means you can easily overrule the stylesheet by using Joomla's built in template override system.
You can overrule the Sliders stylesheet by copying it or creating your own in: /templates/[YOUR TEMPLATE]/css/sliders/style.min.css

Classnames

The classnames of the Sliders elements have changed a little. This means you need to change the classnames used in you custom CSS
Main change is the rename of the keyword slide to slider and the prefix slider_ to nn_sliders_

In your version 2 stylesheet you might have had something like:
.slider_slide.myownstyle a { ... }
That should now be:
.nn_sliders_slider.myownstyle a { ... }

12) 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.2.2 or higher
  • PHP 5.3+ ( No PHP 5.2 support! )
  • PHP mbstring (Multibyte String) functions enabled
  • MySQL 5+

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.

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

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

NoNumber Extension Manager

13.2) Joomla! Extension Manager

To install via the Joomla! Extension Manager, just follow these steps (based on Joomla 2.5 setup):

  1. Download the extension zip.
  2. Log into your Joomla administrator
  3. In the menu, choose: Extensions >> Extension Manager
  4. Under 'Upload Package File' select the extension zip.
  5. Click on 'Upload & Install'
Joomla! Installer

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

14) Uninstallation

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.