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

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 title="Blue" class="blue"}
    [TEXT]
{slider title="Green" class="green"}
    [TEXT]
{slider title="Orange" class="orange"}
    [TEXT]
{slider title="Red" class="red"}
    [TEXT]
{slider title="Grey" class="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 title="Info" class="info"}
    [TEXT]
{slider title="Success" class="success"}
    [TEXT]
{slider title="Warning" class="warning"}
    [TEXT]
{slider title="Danger" class="danger"}
    [TEXT]
{/sliders}

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

Solid

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Solid & Coloured Content

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.

Solid

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

Solid & Colored Content

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Syntax

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

{slider title="Solid" class="blue solid"}
    [TEXT]
{slider title="Solid & Colored Content" class="green solid color_content"}
    [TEXT]
{slider title="Solid" class="orange solid"}
    [TEXT]
{slider title="Solid & Colored Content" class="red solid color_content"}
    [TEXT]
{/sliders}

Custom styling

First Slider

Yes, you can make sliders really ugly like this too!

Second Slider

And add useless css animations.

It's up to you!

Syntax

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

{slider title="First Slider" class="mystyle1"}
    [TEXT]
{slider title="Second Slider" class="mystyle2"}
    [TEXT]
{/sliders}

Here is the custom css used for these classes.

/* Custom Style: mystyle1 */
.rl_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);
}
.rl_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);
}
.rl_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);
}
.rl_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 */
.rl_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;
}
.rl_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;
}
.rl_sliders.accordion > .accordion-group.mystyle2 > .accordion-heading > a.accordion-toggle:hover {
  background-color: #999;
  color: #fff;
}
.rl_sliders.accordion > .accordion-group.mystyle2.active > .accordion-heading > a.accordion-toggle {
  background-color: #666 !important;
  color: #fff !important;
}
.rl_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;
}
.rl_sliders.accordion > .accordion-group.mystyle2.active > .accordion-body > .accordion-inner {
  background-color: #666;
}

Styling the slider title

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

First slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second slider

Aenean commodo ligula eget dolor. Aenean massa.

Syntax

{slider title="First slider" class="icon"}
    [TEXT]
{slider title="Second slider" class="icon"}
    [TEXT]
{/sliders}

Opened/closed titles Pro only

This slider is now closedThis slider is now opened

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Syntax

You can use the title-opened or title-closed parameter to override the default title in the tag. Or use both parameters. 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 title="This slider is now closed" title-opened="This slider is now opened"}
    [TEXT]
{/sliders}
{slider title="This slider is now opened" title-closed="This slider is now closed"}
    [TEXT]
{/sliders}
{slider title="title-opened=This slider is now opened" title-closed="This slider is now closed"}
    [TEXT]
{/sliders}

Default opened slider

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 open slider instead by adding the parameter open to that slider's tag and give it the value true, like:

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

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

First slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This slider is now open 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 title="This slider is now open by default!" class="green" open="true"}
    [TEXT]
{slider Another slider}
    [TEXT]
{/sliders}

Page scrolling Pro only

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

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

{slider title="Slider Title" }

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 title="Scroll Slider" scroll="true"}
    [TEXT]
{/sliders}

Independent sliders

Question 1

Answer 1...

Question 2

Answer 2...

Question 3

Answer 3...

Syntax

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

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

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-ex_sub1_sub1}
        {slider-ex_sub1 Example Slider 1.2}
            [TEXT]
        {/sliders-ex_sub1}
    {slider-ex Example Slider 2}
        [TEXT]
        {slider-ex_sub2 Example Slider 2.1}
            [TEXT]
        {slider-ex_sub2 Example Slider 2.2}
            [TEXT]
        {/sliders-ex-sub2}
        [TEXT]
    {/sliders-ex}
{/sliders}

Access restriction Pro only

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

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

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.