WunderSlider – responsive proportional slider

WunderSlider is a plugin that has something extra that the most of the responsive plugins out there. You can set it to resize your images by proportions: adapts proportionally to the screen size.

The plugin has a lot of properties: 41 effects, 8 themes, 12 overlays, flexible captions, links on image and many more.

How to use:

1. Adding the external sources

<link rel="stylesheet" type="text/css" href="css/default/wunderslidermin.css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="css/default/wunderslider-iemin.css" /><![endif]-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/wunderslider-min.js"></script>

2. The markup

<div id="wunderslider"></div>
#wunderslider {
  width: 80%;
  height: 500px;
  margin: 0 auto;
}

3. Fire the plugin

(function($) {
    $(window).load(function(){
      var parent = document.getElementById('wunderslider');
      var wunderSlider = new itthinx.WunderSlider(
      parent,
      [{
        url:'images-demo/image-0.jpg',
        title:'Title for the first image',
        description:'A nice image...',
        linkUrl:'http://www.wunderslider.com/'
      },
      {
        url:'images-demo/image-1.jpg',
        title:'Second image',
        description:'Another image.'
      },
      {
        url:'images-demo/image-2.jpg',
        title:'Here is another image',
        description:'One more image.'
      } ],
      { mode: 'proportional', mouseOverPause: true }
    );
  });
})(jQuery);

Demo & Documentation

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s