XparoSlider is an easy jQuery image slider with optional text and linking. 

It is easy to set up:

• include the script, the css and the images on your website
• customize (if you want) the layout of the navigation
• add this code: jQuery("#containerID").xparoSlider();
• It is even possible to use more than one Slider per Page.
• works with jquery-1.3.2.js and newer

xparoSlider has these default settings to run:

    interval:11600, /* Time the Slide will be shown */
    slide:true, /* Option to use the Slideshow automatically or manually (true/false) */
    navi: true, /* Show the Navigation (Previous, Pause/Play, Next) (true/false) */
    pages: true, /* Show a Listitem per Slide - can also be used to navigate (true/false) */
    numbers:"image", /* items for pages - Images or Numbers (image/number) */
    text:true, /* Show Text (true/false) */
    direction:"forward", /* Directions of the automatic mode (forward/backward) */

To set up the slider you need a html structure similar like that. If you want to show text or use html links you can insert them as well. The first item needs the css class "show" so there will be at last one item shown on the page

<div id="Example">
        <div class="hometeaser">
            <div class="show">
                <div class="text">
                    <a href="#">Text</a></div>

                <a href="#">
                    <img alt="Picture" src="picture1.jpg" />
                </a>
            </div>

        </div>
</div>

If you want to use no text the html would look like this

<div id="Example">
        <div class="hometeaser">
            <div class="show">

                <a href="#">
                    <img alt="Picture" src="picture1.jpg" />
                </a>
            </div>

        </div>
</div>

Examples

1) Default Values This is how the Slider looks when you start the plugin without values using the default values

    jQuery("#BigTeaser").xparoSlider();

XparoSlider jQuery Plugin
This plugin is usefull if you want to show a slideshow with (optional) text and links to other pages.

Text
If you want to add Text to your XparoSlider you just have to make sure the html syntax is just like the example.

interval (11600 /numeric value)
How long the Single Slides will be shown can be defined with the option interval. You have to insert a numeric value.

slide (true/false)
Automatic slide is activated in the default values.

navi (true/false)
If the option pages(true/false) is set there will be one element for each slide (you can directly navigate clicking on the pages).
An additonal Option is numbers(image/numbers) where you can select if pages should be displayed as images or numbers

pages (true/false)
If true there will be shown as many images as there are Slides (optional numbers)

direction ("forward"/"backward")
Allows to affect the direction the slides will be shown.

numbers (image/number)
Image will show the image per Slide defined in the css, number will show the numbers of the slides

cssclass ("hometeaser"/ classname containing slides)
"hometeaser" by default

2) Only automatic Sliding
If you just want to Show pictures changing in a defined Intervall just set the values for navi and pages false.

    jQuery("#BigTeaser2").xparoSlider({        
        navi:false,
        pages:false,
        interval:11600,
        slide:true
      });

XparoSlider jQuery Plugin
This plugin is usefull if you want to show a slideshow with (optional) text and links to other pages.

Text
If you want to add Text to your XparoSlider you just have to make sure the html syntax is just like the example.

interval (11600 /numeric value)
How long the Single Slides will be shown can be defined with the option interval. You have to insert a numeric value.

slide (true/false)
Automatic slide is activated in the default values.

navi (true/false)
If the option pages(true/false) is set there will be one element for each slide (you can directly navigate clicking on the pages).
An additonal Option is numbers(image/numbers) where you can select if pages should be displayed as images or numbers

pages (true/false)
If true there will be shown as many images as there are Slides (optional numbers)

direction ("forward"/"backward")
Allows to affect the direction the slides will be shown.

numbers (image/number)
Image will show the image per Slide defined in the css, number will show the numbers of the slides

cssclass ("hometeaser"/ classname containing slides)
"hometeaser" by default

3) Only Pages and Automatic Sliding
there are no Previous, Next and Pause Buttons if you just choose to set pages to true. But you're still able to navigate by clicking on the pages

    jQuery("#BigTeaser3").xparoSlider({        
        navi:false,
        pages:true,
        interval:11600,
        slide:true
      });

XparoSlider jQuery Plugin
This plugin is usefull if you want to show a slideshow with (optional) text and links to other pages.

Text
If you want to add Text to your XparoSlider you just have to make sure the html syntax is just like the example.

interval (11600 /numeric value)
How long the Single Slides will be shown can be defined with the option interval. You have to insert a numeric value.

slide (true/false)
Automatic slide is activated in the default values.

navi (true/false)
If the option pages(true/false) is set there will be one element for each slide (you can directly navigate clicking on the pages).
An additonal Option is numbers(image/numbers) where you can select if pages should be displayed as images or numbers

pages (true/false)
If true there will be shown as many images as there are Slides (optional numbers)

direction ("forward"/"backward")
Allows to affect the direction the slides will be shown.

numbers (image/number)
Image will show the image per Slide defined in the css, number will show the numbers of the slides

cssclass ("hometeaser"/ classname containing slides)
"hometeaser" by default

4) Only pages and automatic sliding backwards

    jQuery("#BigTeaser4").xparoSlider({        
        navi:false,
        pages:true,
        interval:11600,
        slide:true,
        direction:"backward"
      });

XparoSlider jQuery Plugin
This plugin is usefull if you want to show a slideshow with (optional) text and links to other pages.

Text
If you want to add Text to your XparoSlider you just have to make sure the html syntax is just like the example.

interval (11600 /numeric value)
How long the Single Slides will be shown can be defined with the option interval. You have to insert a numeric value.

slide (true/false)
Automatic slide is activated in the default values.

navi (true/false)
If the option pages(true/false) is set there will be one element for each slide (you can directly navigate clicking on the pages).
An additonal Option is numbers(image/numbers) where you can select if pages should be displayed as images or numbers

pages (true/false)
If true there will be shown as many images as there are Slides (optional numbers)

direction ("forward"/"backward")
Allows to affect the direction the slides will be shown.

numbers (image/number)
Image will show the image per Slide defined in the css, number will show the numbers of the slides

cssclass ("hometeaser"/ classname containing slides)
"hometeaser" by default

5) with Navigation - no automatic sliding

    jQuery("#BigTeaser5").xparoSlider({        
        slide:false,
        interval:11600
      });

XparoSlider jQuery Plugin
This plugin is usefull if you want to show a slideshow with (optional) text and links to other pages.

Text
If you want to add Text to your XparoSlider you just have to make sure the html syntax is just like the example.

interval (11600 /numeric value)
How long the Single Slides will be shown can be defined with the option interval. You have to insert a numeric value.

slide (true/false)
Automatic slide is activated in the default values.

navi (true/false)
If the option pages(true/false) is set there will be one element for each slide (you can directly navigate clicking on the pages).
An additonal Option is numbers(image/numbers) where you can select if pages should be displayed as images or numbers

pages (true/false)
If true there will be shown as many images as there are Slides (optional numbers)

direction ("forward"/"backward")
Allows to affect the direction the slides will be shown.

numbers (image/number)
Image will show the image per Slide defined in the css, number will show the numbers of the slides

cssclass ("hometeaser"/ classname containing slides)
"hometeaser" by default

6) Only pictures with automatic sliding

    jQuery("#BigTeaser6").xparoSlider({        
        navi:false,
        pages:false,
        interval:11600,
        slide:true
      });

If there are any questions or improvements, feel free to leave comments below.