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

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)

<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />
 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .

3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

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

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox