Proportional

This is an example of a responsive WunderSlider in proportional mode using the Dotsy Dark skin:




The following is the WunderSlider XML specification that the WunderSlider WordPress Plugin uses to render the above:


[wunderslider]
<wunderslider skin="dotsy-dark" display="proportional" mode="proportional" clickable="false" container-style="width:95%; height: 600px; margin-left:auto;margin-right:auto;left:0;right:0;">
<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]

Recent Posts