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