"ARI Smart Content - Easy Slider" plugin creates a content slider in Joomla! content. The plugin can be enabled/disabled and configured on "Extensions → Plugin Manager" page on Joomla! backend. Common information how to use "ARI Smart Content" applications plugins is here. {easyslider} plugin tag is used for the plugin. The following code creates a slider with three items which are defined manually:

{easyslider}

       {item}

               This is the first item

       {/item}

       {item}

               This is the second item

       {/item}

       {item}

               This is the third item

       {/item}

{/easyslider}

As you can see slider items are defined using {item}...{/item} code. Any HTML code can be used between {item} and {/item} tags.

It is also possible to create sliders based on data from Text data data sources. In this case use source attribute of {easyslider} tag to define ID of the data source. For example you have created a data source (and ID of this data source is 5) which selects Joomla! articles from the selected categories and what to create an slider based on these articles. Use the following plugin code:

{easyslider source="5"}

{/easyslider}

In this case slider items content will be formatted according to value of "Template" parameter from plugin settings. Possible to use template attribute of {easyslider} tag to define custom formatters:

{easyslider source="5" template="{$introtext}"}

{/easyslider}

Plugin settings

The following parameters can be defined on plugin settings page ("Extensions → Plugin Manager → ARI Smart Content - Easy Slider" page on Joomla! backend):

• Load method is used to specify load method on client side. If it is set to 'On Load', a slider will be created when page and all resources (images, styles and etc.) are loaded by a browser. If it is set to 'DOM Ready', the slider will be created immediately when page is loaded (it doesn't wait till all resources are loaded, they will be loaded in parallel). In other words, 'DOM Ready' event occurs before 'On Load' and if possible it is preferable to use it instead of 'On Load'.  This parameter can be useful to resolve conflict with some 3rd party extensions, if the extension doesn't work properly when it's set to 'DOM Ready', try to switch it to 'On Load'.

• Theme is used to specify the theme which will be used for sliders by default.

• Width is used to specify width which will be used for the sliders by default. Possible values: 350, 500 and etc.

• Height specifies height of the sliders. Possible values: 300, 420 and etc.

• Template is used to define template for slides content when slider is created based on a data source. It is possible to use data source predefined variables (like {$title}, {$introtext} and etc.) and HTML code.

• Responsive is used to specify should be sliders responsive or not. If it is responsive then slider size will be adapted to screen size.

• Direction is used to specify scrolling direction.

• Items per page specifies how many items should be shown on each slider page.

• Start slide index is used to specify index of initial slide.

• Speed specifies slider speed in milliseconds.

• Auto-rotate specified auto rotate slider items or not.

• Auto rotate reverse motion if this option is set to 'Yes', the slider will moves slides in reverse direction. From right to left (from top to bottom).

• Pause duration specifies pause duration in milliseconds.

• Continuous enable this option, if you want to scroll items from the last to the first and vise versa when a user click next or prev button.

• Opposite if this option is disabled, the module will scroll items in unlimited way.

• Pause on hover specifies should be slideshow paused on mouse hover.

• Move effect is a transition effect.

"Navigation controls" parameters section is used to show/hide navigation controls and configure button labels:

• Controls position is used to specify position when navigation controls will be shown.

• Fade controls specified fade controls or not.

• Show paging is used to show/hide paging control.

• Paging type specified paging type. Paging buttons can contain numbers (1,2 and etc.) or words (one, two and etc.).

• Show navigation controls is used to show/hide navigation buttons (next, prev and etc.).

• Previous button is used to specify label of previous button.

• Show prev button is used to show/hide previous button.

• Next button is used to specify label of next button.

• Show next button is used to show/hide next button.

• First button is used to specify label of first button.

• Show first button is used to show/hide first button.

• Last button is used to specify label of last button.

• Show last button is used to show/hide last button.

• Show play/pause buttons is used to show/hide play/pause buttons.

• Pause button is used to specify label of pause button.

• Play button is used to specify label of play button.

"Styles parameters" section contains parameters to define some style properties of the slider:

• z-Index specifies z-index for the slider.

• Opacity is used to specify opacity. Use a real number from 0 to 1. Possible values: 0.1, 0.5, 1 and etc.

• Border width is used to specify container border width. Possible values: 0, 1, 4 and etc.

• Border color is used to specify container border color.

• Border type is used to specify container border type.

• Background specifies slider background color.

• Border corner radius is used to specify container border corner radius.

• Content padding specifies content padding. Possible values: 0, 5, 8 and etc.

• CSS styles specifies additional styles if necessary. You can use predefined variable {$id} which will be replaced with id of the slider container. For example you can add the following code to change font size to 20px for slides:

#{$id} {font-size: 20px;}

Plugin code syntax

The following attributes can be used for {easyslider} tag:

• theme is used to override Theme parameter from plugin settings. The following sample code set advanced theme for the slider:

{easyslider theme="advanced"}

       {item}

               This is the first item

       {/item}

       {item}

               This is the second item

       {/item}

{/easyslider}

• width is used to override Width parameter from plugin settings. The following plugin code set width of the slider to 500 pixels:

{easyslider width="500"}

       {item}

               This is the first item

       {/item}

       {item}

               This is the second item

       {/item}

{/easyslider}

• height is used to override Height parameter from plugin settings. The following plugin code set height of the slider to 400 pixels:

{easyslider height="400"}

       {item}

               This is the first item

       {/item}

       {item}

               This is the second item

       {/item}

{/easyslider}

• responsive is used to override Responsive parameter from plugin settings. Possible values: 0 and 1. The following code disable responsive mode:

{easyslider responsive="0"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/easyslider}

• dir is used to override Direction parameter from plugin settings. Possible values: horizontal and vertical. If the parameter is set to horizontal then the slider will scroll items in horizontal direction otherwise in vertical direction. The following code set slider direction to horizontal:

{easyslider dir="horizontal"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/easyslider}

• itemsPerPage is used to override Items per page parameter from plugin settings. The following code creates the slider which shows 2 items per page:

{easyslider itemsPerPage="2"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/easyslider}

• startSlide is used to override Start slide index parameter from plugin settings. The following code creates the slide which starts from the second page:

{easyslider startSlide="1"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/easyslider}

• speed is used to override Speed parameter from plugin settings.

• auto is used to override Auto-rotate parameter from plugin settings. Possible values: 0 and 1. The following plugin code enables auto rotation:

{easyslider auto="1"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/easyslider}

• oppositeMove is used to override Auto-rotate reverse motion parameter from plugin settings. Possible values: 0 and 1.

• pause is used to override Pause duration parameter from plugin settings.

• continuous is used to override Continuous parameters from plugin settings. Possible values: 0 and 1.

• opposite is used to override Opposite parameters from plugin settings. Possible values: 0 and 1.

• pauseOnHover is used to override Pause on hover parameters from plugin settings. Possible values: 0 and 1.

• moveFx is used to override Move effect parameter from plugin settings. You can see each easing effect in action here. The following values are possible:

• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce
• fade
• swing

The following code set animation effect to fade value:

{easyslider moveFx="fade"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/easyslider}

• controlsPos is used to override Controls position parameter from plugin settings. Possible values: bottom, top and top_bottom. The following code shows navigation controls at top position:

{easyslider controlsPos="top"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/easyslider}

• controlsFade is used to override Fade controls parameter from plugin settings. Possible values: 0 and 1.

• pagingShow is used to override Show paging parameter from plugin settings. Possible values: 0 and 1.

• pagingType is used to override Paging type parameter from plugin settings. Possible values: numeric and words. The following code creates slider which uses words for paging buttons:

{easyslider pagingType="words" pagingShow="1"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/easyslider}

• controlsShow is used to override Show navigation controls parameter from plugin settings. Possible values: 0 and 1.

• playPauseShow is used to override Show play / pause buttons parameter from plugin settings. Possible values: 0 and 1.

• padding is used to override Content padding parameter from plugin settings. The following code use 5 pixels padding for slides:

{easyslider padding="5"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/easyslider}