×

Warning

JLIB_APPLICATION_ERROR_COMPONENT_NOT_LOADING

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

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

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Cras dapibus.

Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus.

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

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

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}

 

Styled slider titles

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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

Nulla consequat massa quis enim.

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 slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

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}

 

Sliderlinks

Open First SliderOpen Second SliderOpen Third Slider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

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 linkedslider2}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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

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

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Cras dapibus.

Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus.

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.

Aenean imperdiet.

Etiam ultricies nisi vel augue.

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.

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}

 

Oldschool styling

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

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

Nullam dictum felis eu pede mollis pretium.

Integer tincidunt.

Cras dapibus.

Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.

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

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa.

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

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.