20 Sep 2011

Implementing Flex Slider in Blogger

Flexslider is a jQuery slider plugin which has been created, developed and maintained by Tyler Smith and released for Smashing Magazine and its readers. As usual, the plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. In five simple steps, you can have a fully responsive slider for your responsive design.




See Demo



Download





Steps to Add it to Blogger:

1.Login to the Blogger account


4.Now for adding the images into this plugin see the following markup:

<div id="container">
<div class="flexslider">
     <ul class="slides">
      <li>
       <img src="1.jpg" />
       <p class="flex-caption">Captions</p>
      </li>
      <li>
       <a href="http://www.google.com"><img src="2.jpg" /></a>
       <p class="flex-caption">This image is wrapped in a link!</p>
      </li>
      <li>
       <img src="3.jpg" />
      </li>
      <li>
       <img src="4.jpg" />
      </li>
     </ul>
   </div></div>

The div block with id "container" is the outer wrapper of the images to be displayed.

The class "flex-caption" is used for displaying captions below the image

Now for hooking this to the Slider using this JavaScript:

<script type="text/javascript">
  $(window).load(function() {
   $('.flexslider').flexslider();
  });
 </script>

5.Now save the Post/Page.




See Demo



Download