Download Free Buy Pro

Sliders is based on the Bootstrap sliders. 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.

Simple set

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.

Syntax

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

{slider First Slider}
    [TEXT]
{slider Second Slider}
    [TEXT]
{slider Third Slider}
    [TEXT]
{/sliders}

Individually styled sliders

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

You can also add your own classes and style them however you want. 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;
}

Styled slider titles

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}

Active/inactive titles

This functionality is ONLY available in the Joomla 3 version!

This feature has been added in version 4.0.0

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 closedThis slider is now opened

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 closed|title-active=This slider is now opened}
    [TEXT]
{/sliders}
{slider This slider is now opened|title-inactive=This slider is now closed}
    [TEXT]
{/sliders}
{slider title-active=This slider is now closed|title-inactive=This slider is now closed}
    [TEXT]
{/sliders}

Plus/minus icons

This functionality is ONLY available in the Joomla 3 version!

You can add a plus/minus icon to the sliders simply by adding the icon class to the tag.

Slider with plus/minus icon

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

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

{slider Slider with plus/minus icon|icon}
    [TEXT]
{/sliders}

Active slider

By default the first slider is opened. To set a different slider as opened by default, add the active attribute to that slider.

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}

All sliders closed

By default the first slider is opened. If you want it closed by default, just add the closed attribute.

First slider is now closed!

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.

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 is now closed!|closed}
    [TEXT]
{slider Second slider}
    [TEXT]
{slider Another slider}
    [TEXT]
{/sliders}

Open/close all sliders

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>

Sliderlinks

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}

Page scrolling

This functionality is ONLY available in the Pro version!

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}

Nested Sliders

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

This functionality is ONLY available in the Pro version!

This functionality is ONLY available in the Joomla 3 version!

This feature has been added in version 4.0.0

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}

Sliders also works in modules and anywhere else you can enter text.

Isn't

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

that

Aenean commodo ligula eget dolor. Aenean massa.

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

cool?!

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.