Fullscreen

The background of this page is an example of a fullscreen WunderSlider using the Box skin and a striped overlay.

The following code has been used for this page including an adjustment for the body element and the WunderSlider XML specification that the WunderSlider WordPress Plugin uses to render the above:


<style type="text/css">
body {
margin: 0 auto;
max-width: 1000px;
padding-bottom: 60px;
}
</style>

[wunderslider]
<wunderslider skin="box" display="fill" mode="proportional" clickable="false" overlay="stripes" appendTo="body">
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-0.jpg" title="Responsive & Flexible Layout" description="Adaptive display modes support responsive designs without the need for media queries." />
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-1.jpg" title="Automatic Image Adjustment" description="Images are adjusted to the slider size and display mode, maintaining the original image\'s aspect ratio." />
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-2.jpg" title="Effects" description="41 transition effects that can be applied randomly or specified per slide." />
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-3.jpg" title="Themes" description="Comes with 8 skins (themes) that support both embedded and fullscreen modes." />
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-4.jpg" title="Overlays" description="12 overlay meshes in black or white with adjustable opacity for smoother image appearance on all display sizes." />
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-5.jpg" title="Captions" description="Individual image captions with titles, HTML descriptions and links. Caption position and size can be set independently for each image.">
<caption right="10px" top="50px" width="275px" height="120px" />
</image>
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-6.jpg" title="Links" description="Link images and captions optionally: Allows to link image captions only or also the image." linkUrl="http://www.wunderslider.com/" />
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-7.jpg" title="Controls" description="Show or hide UI controls independently: Next & previous navigation, image selectors, image captions." />
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-8.jpg" title="Flick it!" description="Flicking / swiping on all devices." />
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-9.jpg" title="Touch Enabled" description="All controls, including flicking / swiping, are supported in all display modes also on touch-enabled devices." />
<image url="http://wunderslider.com/wordpress/wp-content/uploads/2012/07/image-10.jpg" title="Configurable Effects and Transitions" description="Configurable number of effect blocks with auto-adjust feature to maintain a square block geometry if desired." />
</wunderslider>
[/wunderslider]