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

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

12 Replies to “Implementing Flex Slider in Blogger”

    1. Prayag Verma,
      Thanks for your prompt reply! That's a useful tutorial and thank you, it worked!

      However, I have one question.
      I actually expected the slider to "slide" to left or to the right, instead of the blur slide transition. Is it possible to customize it?

    2. There is a slide animation too , I checked your blog and saw that you were using the slide animation but its not applying

      The code for it is

      $(window).load(function() {
      $('.flexslider').flexslider({
      animation: "slide"
      });
      });

      You were missing some brackets , Hope it helps

    3. Sorry to bother you again, Prayag. You're so helpful that's why I come back to you. 😀
      Do you know how to adjust the size of the slide image?
      This is the test page: http://hd-cardiza.blogspot.com/. The actual image size is 827 x 413px. Currently it's being shrunk and the width is stretched.
      Thanks in advance.

  1. Hi Prayag Verma,

    I used this flexslider in my website but it create problem on Touch Screen pannels. Please let me know the solution for the same.
    Thanks

    Pooja Bawa

Leave a Reply

Your email address will not be published. Required fields are marked *