Joomla - How to create Sliders

To create a slider in Joomla simply follow these steps:

  1. While in the editing window, look for the "Insert Sliders" button at the bottom of your editing screen.
  2. Place your cursor where you want to display your sliders, and click on the "Insert Sliders" button
  3. Now you will see this code on your screen:

    {slider Slider Title 1}

    Your text...

    {slider Slider Title 2}

    Your text...

    {/sliders}

  4. Replace the text in red font (it will not be red on your screen, just here for ease of explanation).  "Slider Title 1"  will need to be replaced with your custom heading, and "Your text .." needs to be replaced with your custom text.
  5. For example if you like to do a Q&A using the sliders style it will look something like this:

    {slider How do I apply for Housing?}
    Applying for housing is easy, simply send an email or contact us by phone.
    {slider How much does it cost?}
    Fees are determined at the time of enrollment.
    {/sliders}

  6. Adding  sliders is easy, using the previous example, adding one more question:

    {slider How do I apply for Housing?}
    Applying for housing is easy, simply send an email or contact us by phone.
    {slider How much does it cost?}
    Fees are determined at the time of enrollment.
    {slider Are pets allowed?}
    Pets are not allowed.

    {/sliders}

  7. By default the first slider is always open, to change it so it is closed add the following right after the first title "|closed". Using the previous example, our code will look like this now:

    {slider How do I apply for Housing?|closed}
    Applying for housing is easy, simply send an email or contact us by phone.
    {slider How much does it cost?}
    Fees are determined at the time of enrollment.
    {slider Are pets allowed?}
    Pets are not allowed.
    {/sliders}


  8. The symbol used in "|closed" is called the "Pipe" usually located above your "Enter" (Windows) or "Return" (Mac). It is the vertical line,  Shift + \
  9. For a complete guide on how to use sliders and other options available, you can visit the developer's site at: http://www.nonumber.nl/extensions/sliders/userguide