Developer manual
slider
Embeds a 'Slider' control
Updated: Type: springtag
Method
<slider option="value"/>
Current
Request Attributes
Attribute | Type | Description | Default | Required? | |
---|---|---|---|---|---|
current | display | boolean | Can be used to force the display of the slider if display is to be determined by a surrounding <if/> tag. Allowed values: 1,0 |
No | |
current | node | option | Controls which xml node to get the xml content for the slides.
Can be used at it's most basic (when using node="images") to created a slideshow. Only image, title and description is supported by default when using this instance.
If using the more complex custom form options (spring.slider.xml) - set this to node="slider". Allowed values: slider, images, any xml node containing appropriate data |
images | No |
current | width | number | Width of the image to output Allowed values: Valid number |
Yes | |
current | height | number |
Allowed values: Valid number
|
Yes | |
current | crop | boolean | Controls whether images are cropped by Spring or scaled. The slide may then crop or scale the image when displayed depending on the CSS and other options. Allowed values: 1,0 |
Yes | |
current | quality | number | Quality of the image to output. Allowed values: Number between 0-100, higher is better |
80 | No |
current | show | list | Which elements to output in the main panel. Allowed values: image title description link May be deprecated in future as Spring checks for existing content for each element anyway. Items are separated by whitespace. Order does not matter. |
image | No |
current | style | list | Controls which slider 'skin' to use. Allowed values: default, minimal, default-inverted, universal |
default | No |
current | controlnavigation | option | Which navigation controls to use Allowed values: bullets, thumbnails or none 'tabs' has not been verified to work yet |
none | No |
current | arrowsnav | boolean | Direction arrows navigation Allowed values: true, false |
true | No |
current | loop | boolean | Makes slider go from last slide to first Allowed values: true, false |
false | No |
current | looprewind | boolean | Makes slider go from last slide to first with rewind. Overrides'loop' option Allowed values: true, false |
false | No |
current | slidesspacing | number | Spacing between slides in pixels Allowed values: Number |
No | |
current | autoplay | boolean | Enable auto play when slider first viewed Allowed values: true, false |
false | No |
current | pauseonhover | boolean | Pause autoplay on hover Allowed values: true, false |
false | No |
current | delay | number | Delay between items in ms Allowed values: Valid number |
3000 | No |
current | transitiontype | option | Transition used between slides Allowed values: move, fade |
fade | No |
current | navigatebyclick | boolean | Navigates forward by clicking on slide Allowed values: true, false |
true | No |
current | sliderdrag | boolean | Mouse drag navigation over slider Allowed values: true, false |
true | No |
current | thumbautocenter | boolean | Automatically centers container with thumbs if there are small number of items Allowed values: true, false |
false | No |
current | thumbfitinviewport | boolean | Reduces size of main viewport area by thumbnails width or height, use it when you set 100% width to slider. This option is always true, when slider is in fullscreen mode Allowed values: true, false |
true | No |
current | thumborientation | option | Location to display thumbnails Allowed values: horizontal, vertical |
vertical | No |
current | thumbspacing | number | Spacing between thumbs Allowed values: Number |
No | |
current | thumbpaddingbottom | number | Padding beneath thumbs Allowed values: Number |
No | |
current | autoscaleslider | boolean | Automatically updates slider height based on base width Allowed values: true, false |
false | No |
current | autoscalesliderheight | number | Base slider width. Slider will autocalculate the ratio based on these values. Allowed values: Number |
400 | No |
current | autoscalesliderwidth | number | Base slider height. Slider will autocalculate the ratio based on these values Allowed values: Number |
800 | No |
Examples
#1
Request
<slider display="1" node="slider" width="1160" height="300" crop="1" quality="90" show="image title description link" style="minimal" controlnavigation="thumbnails" arrowsnav="false" looprewind="true"autoplay="true" pauseonhover="true" delay="8000" transitiontype="move" navigatebyclick="false" sliderdrag="false" />
Embeds a slider with side 'thumbs' navigation
#2
Request
#slider .rsTmb { padding: 20px; } #slider .rsThumbs .rsThumb { width: 280px; height: 100px; border-bottom: 1px solid #2E2E2E; } #slider .rsThumbsVer { width: 280px; padding: 0; } #slider .rsThumbsHor { height: 100px; padding: 0; } #slider .rsThumb:hover { background: #000; } #slider .rsThumb.rsNavSelected { background-color: #02874A; border-bottom:-color #02874A; } #slider .rsTmb p { margin: 0; } #slider .rsTmb p.description { font-size: 0.8em; }
CSS to style either a vertical or horizontal thumbs slider