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







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

Post a Comment

delicious cake ;)

nice slide master \m/

Anonymous said...

AFTER I HOST THE FILES ON BLOGGER HOW TO LINK THEM ??

After you have all the files inline in Blogger, you will just have to call them normally. There is no special procedure involved . For example check this tutorial for seeing the way it works.

Unknown said...

doesnt work!

http://kaminime.blogspot.com/

The above URL is a invite-only blog, please provide a URL of a public blog where you have tested it

Rose said...

Hi Prayag Verma,
Thanks for sharing the info. I used your tutorial to implement different Flexslider on my blog. However, it does't work.

Here's the Flexslider: http://www.woothemes.com/flexslider/
And here's my test blog: http://hd-rns.blogspot.com/

What I did was just putting the code to my widget (for single usage), and not under the 'head' section.

Could it be possible because of the link of my Dropbox?
Please assist. Thanks in advance!

Hi Rose
yes the problem is due the Dropbox link , you are not using a Public link for the flexslider-min.js file

Here is a tutorial on how to get the Public Link : http://www.stylifyyourblog.com/2011/08/hosting-your-files-on-dropbox.html

Rose said...

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?

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

Rose said...

Yes, it helped! Thanks a lot. Really appreciate it!

Rose said...

Sorry to bother you again, Prayag. You're so helpful that's why I come back to you. :D
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.

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