8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB

http://imagesliderforblogger.blogspot.in/2014/01/flexsliderbasicimagesliderwidget.html#.Vdsuvfmqqko 1/7

Image Slider For BloggerAll image slider for Blogger and content slider is here.

Home JavaScript Slider jQuery Slider CSS3 Slider

Tweet 0 12 448

FlexSlider Basic Image Slider Widget forBlogger

This is a responsive jQuery image slider. This simple but amazing slider developed bywoothemes.com. It has some really nice features that makes you like it. The most cool feature is it isextremely responsive and lightweight; you don't have to tensed about the sliders width / height evenall images width and height are auto adjustable. Here it is customized for blogger/blogspot so youcan just copy and paste the code to install on your blogger blog. Check out the live demo below.

Slider DEMO1 ﴾Blogspot﴿Slider DEMO2 ﴾Static﴿

Let’s Install the FlexSlider Image Slider Widget in Blogger

1. Go to Blogger Dashboard > Layout > Add a Gadget Select HTML/Javascript 2. Copy the code below and paste on it.

Blog Archive

▼  2014 ﴾1﴿

▼  January ﴾1﴿

FlexSlider Basic Image Slider Widgetfor Blogger

►  2013 ﴾5﴿

Follow by Email

Popular Posts

FlexSlider Basic ImageSlider Widget for BloggerThis is a responsive jQueryimage slider. This simplebut amazing slider

developed by woothemes.com. It hassome really nice features th...

Pure CSS3 Image Slider forBlogspot ﴾Cycle Style﴿Here I came up with astylish and hot image sliderfor blogger that is just

using pure CSS3. No Javascript or jQueryis used. So this ...

jQuery Image Slider﴾wowslider﴿ with Thumbnails forBlogspotHere I came up withanother awesome image

slider for blogspot. This is a 'jQueryImage Slider with Thumbnails' createdby WOWS...

Add JavaScript ImageSlider to Blogger EasilyHere I’m sharing a coolJavaScript image slider forblogger. It could be easily

usable as featured content on bloggerblog. This image s...

jQuery Carousel Slider forBlogger ﴾FlexSlider﴿This is a responsive jQuerycarousel slider. Thisamazing slider developed

by flexslider.woothemes.com. It hassome really cool features ...

Nivo Slider ‐ jQuery ImageSlider For BloggerToday I'm sharing anotherawesome, beautiful imageslider for Blogger/

BlogSpot blog. It is made with jQuery.and of course HTML ...

14Like

Email address... Submit

8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB

http://imagesliderforblogger.blogspot.in/2014/01/flexsliderbasicimagesliderwidget.html#.Vdsuvfmqqko 2/7

Tweet 0 12 448

Related Posts

 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl‐2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */

/* Browser Resets*********************************/.flex‐container a:active,.flexslider a:active,.flex‐container a:focus,.flexslider a:focus  {outline: none;}.slides,.flex‐control‐nav,.flex‐direction‐nav {margin: 0; padding: 0; list‐style: none;}

/* FlexSlider Necessary Styles*********************************/.flexslider li {border: 0 none !important;padding: 0 !important;text‐indent: 0 !important;margin‐bottom: 0 !important;}.flexslider {margin: 0; padding: 0;}

 3. Save, and we are done.

NOTE: 

Forget about width and height it will adjust auto.Replace the pink colored image URL with your own uploaded image URL﴾You can uploadimage on blogspot, flickr etc.﴿ There is some other things you may want to play with, see below. I guess I don't have toexplain that because they are named like as they are. Play with them...

animation: "slide", controlNav: true, directionNav: true, easing: "swing", slideshowSpeed: 3000,         animationSpeed: 600, 

Have fun! Don't forget to say thanks :﴿

at 10:02 PMLabels: FlexSlider, Image Slider, jQuery Slider, Responsive, Widget

Share this post

50 comments

Thank you it works perfectly , One question ‐ how do I make it 600px x 400px ?

Reply

Stevie K January 29, 2014 at 10:52 PM

I do not know how to change the pictures! help

Zuumisia February 3, 2014 at 8:40 AM

14Like

You like FlexSlider Basic Image Slider Widget for Blogger ~ ISFB.

Say something more about this...

FlexSlider Basic Image SliderWidget for Blogger ~ ISFBThank you for featuring all the solutions. I wasplaying around with FlexSlider andencountered a peculiar i...

IMAGESLIDERFORBLOGGER.BLOGSPOT.COM

Close Add a Comment

8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB

http://imagesliderforblogger.blogspot.in/2014/01/flexsliderbasicimagesliderwidget.html#.Vdsuvfmqqko 3/7

Replies

Replies

Replies

Reply

Thank you for featuring all the solutions. I was playing around with FlexSlider and encountered apeculiar issue. The code worked great when I tested it on an empty page. However, when I pastedthe very same code on blogger the images became a bit out of line – the frame's height is too big,dimpost's link is not on the image but below and a piece of previous image is visible on the left﴾see here: http://czyta‐czyten.blogspot.com/2014/02/mateusz.html﴿. I reset all the imageproperties in the css ﴾removed border, padding etc.﴿. I still believe the problem is somewhere inthe template's css, but I can't find it. Do you have any ideas?

Reply

Karina Graj February 6, 2014 at 7:51 AM

Add this little CSS ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐.flexslider li {margin‐bottom: 0 !important;}.flexslider .slides, .flexslider .slides img, .flex‐direction‐nav {margin: 0 !important;padding: 0 !important;}‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐

It will do what you needed And let me know.

Reply

Admin February 6, 2014 at 10:03 AM

This is great! Is there a way to change the code to make this image slider fluid, so it will go acrossthe whole page?

Reply

Tittle + Jot February 11, 2014 at 9:21 AM

@Jot, Don't you notice this slider is already fluid/responsive! and its width is 100%

Admin February 19, 2014 at 1:00 AM

Hello, Thank you for the code! I tried installing the Image Slider but I was wondering how can I

remove the border/line on the right side and bottom! Thank you!

Reply

Lei February 13, 2014 at 2:36 AM

I think you want to remove right‐bottom shadow. to do that find this code below...and remove it.

‐webkit‐box‐shadow: 0 1px 4px rgba﴾0,0,0,.2﴿; ‐moz‐box‐shadow: 0 1px 4pxrgba﴾0,0,0,.2﴿; ‐o‐box‐shadow: 0 1px 4px rgba﴾0,0,0,.2﴿; box‐shadow: 0 1px 4pxrgba﴾0,0,0,.2﴿;

Admin February 19, 2014 at 1:06 AM

Bro, its working fine in my test blog but the both navigation arrow mark went down, how to fix itplease help ??

Reply

Hasan Al Mehdi February 14, 2014 at 8:18 PM

@Hasan Al Mehdi, I see your test blog.. there is no problem as you say. But I cannot

solve your main blogs problem without the URL

Admin February 19, 2014 at 1:10 AM

http://demotesing.blogspot.in/2014/02/testing‐slicebox‐image‐slider.html

Reply

Hasan Al Mehdi February 14, 2014 at 8:18 PM

Thank you so much for this ! It's absolutly stunning. Unfortunetly, I can't manage to make it work.Here's a screen cap of what appears when i enter the codehttp://4.bp.blogspot.com/‐6mSn6P7zbaw/UwCdypvfLoI/AAAAAAAANIk/7meeVB6z59s/s1600/Capture+d%E2%80%99e%CC%81cran+2014‐02‐16+a%CC%80+12.14.41.png

Glittering Delirium February 16, 2014 at 3:16 AM

8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB

http://imagesliderforblogger.blogspot.in/2014/01/flexsliderbasicimagesliderwidget.html#.Vdsuvfmqqko 4/7

Replies

Replies

Replies

Any idea of what I can do to make it right ?Hoping you'll answer !

﴾Ps : please excuse my english, i'm french ;﴿﴿

Reply

@Glittering Delirium, Thanks for your feedback. Give me your Blog URL, I'll try tosolve it.

Admin February 19, 2014 at 1:13 AM

Hello, would you happen to know why my images are not in order, and why the images lookedstretched, I did make the slider bigger but that should affect the images if they are the same sizeno? Any help is greatly appreciated, thanks

Reply

Anonymous February 20, 2014 at 4:29 PM

Sorry I forgot to mention my url: http://www.soulostyle.com/

Reply

Anonymous February 20, 2014 at 4:32 PM

Your Image size is smaller than slider container. use bigger than 792X594px images.

Admin February 24, 2014 at 6:15 PM

THANK YOU FOR THIS! It is working fluidly on my site: http://www.parallelplanets.com/

However, what codes do I add if I want to set the default width to something smaller? Also, howdo I add clickable texts on the images so the title of the post can appear on every photo?

I appreciate the help!

s!

Reply

Erin Emocling February 23, 2014 at 12:08 AM

Very good work.is it possible to made it " random " ?

Reply

Comité d'animation bbc27 February 23, 2014 at 1:49 AM

add ‐randomize: truejust afteranimationSpeed: 600,

Admin February 24, 2014 at 6:29 PM

Here is a complete list of FlexSlider Properties: http://go.dimpost.com/47s

Admin February 24, 2014 at 6:36 PM

hi thank you so much for your code, it works perfectly. however im a real novice with computersand would just like to know how do i upload my own pics from my saved pictures on my laptop

thank you so much

Reply

zoe seaton February 23, 2014 at 1:07 PM

Awesome widget! Can it open up a lightbox image in fullscreen if the images are clicked? I wouldlike to use a small version of this where when you click the image you get a larger view of it. Muchlike when you click on images in a blogger post and they open up

Reply

Jason February 28, 2014 at 2:04 PM

Thank you so much! It helps a lot!

Reply

Andy Chan March 6, 2014 at 12:53 AM

Show Bobo March 9, 2014 at 12:21 AM

8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB

http://imagesliderforblogger.blogspot.in/2014/01/flexsliderbasicimagesliderwidget.html#.Vdsuvfmqqko 5/7

Hi Admin,

Thank you very much for the FlexSlider script. However, there is an issue of the slider in my blog:http://showbobos.blogspot.com/p/showbobos.html#.UxwijYVbvng

Notice that the arrangement of images is not in order. In the script, the very bottom image link isdisplayed first in the slider. Is that what suppose the script doing?

Thank you.

Reply

wow! I'm searching for a slider like this from so long! I try to install it on my blog, I'm testing it fora new theme, but it looks different to me, here it is: http://madalinasimona.blogspot.ro/.How can I make the little dots, I mean those froms lider's bottom to look like in the demo?

And can I make this slider to appear only in the main page﴾home﴿?

Thank you a lot!!

Reply

Mădălina Simona Merca March 12, 2014 at 4:02 PM

Hello, thank you so much for the code. I was wondering if there is anyway to remove the 'dots'from the bottom?

Thanks

Reply

Heidi Bussey March 12, 2014 at 9:30 PM

I can't seem to get this to work…I am getting some sort of js errorhttp://template‐sitebdesign.blogspot.com/p/portfolio.html

Reply

Bailey B. Stewart March 13, 2014 at 6:59 PM

Hi, can you have a look of my slide? http://monuchi.blogspot.co.uk/the 3 small circle are not working in my blog... how can I change it?

Thanks!

Reply

Marta March 20, 2014 at 2:48 AM

Thank you ! How do you confine the slider to just the home page ?

Reply

Jade Gregory March 25, 2014 at 9:49 PM

hi ,thank you for your code. I'm using it in my blog. Welcome to visit :www.inspirationalvideo123.comI have one question is : When we click in picture, how to the target address will open in anothertab. ﴾ not replace current address in same tab﴿. TK.

Reply

Henry Chen April 7, 2014 at 12:56 AM

Hi, thank you so much for this amazing slider! It works great but I wonder if there's a way to putcaptions in the images?

Reply

Irene Caye April 12, 2014 at 5:56 PM

Thank you, exactly what I was looking for, looks great on my site, www.irobotgamingtv.com

Reply

Craig Angus April 16, 2014 at 7:20 AM

Hi, love this slider and installed it...Looks great, but want to reduce height and also remove extrawhite border coming at boder. Plz. look here and let me know how to fix. Thanks ‐http://tastejunction.blogspot.ae/

Reply

Taste Junction May 6, 2014 at 8:45 AM

Thanks for this post. I found how to change the size of the pics because at 100% it was too largefor my taste. What do I need to do to have this centered?

.flexslider {margin: 0; padding: 0;}

.flexslider .slides > li {display: none; ‐webkit‐backface‐visibility: hidden;} /* Hide the slides beforethe JS is loaded. Avoids image jumping */.flexslider .slides img {width: 60%; display: block;}.flexslider .slides, .flexslider .slides img, .flex‐direction‐nav { margin: 0 !important; padding: 0

D'Wayne Wilkins May 9, 2014 at 11:53 AM

8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB

http://imagesliderforblogger.blogspot.in/2014/01/flexsliderbasicimagesliderwidget.html#.Vdsuvfmqqko 6/7

!important; }.flex‐pauseplay span {text‐transform: capitalize;}

Reply

Hi, thank you so much for this slider! Its amazing!! But, i have same problem like Karina Graj, ihave small picture in slider...Can you help me with template's css, please?http://www.kristynazouzalova.com/p/home.html Thank you so much for your help...

Reply

Kristýna May 21, 2014 at 5:11 PM

Hi! Really loving this one However when I used this on my blog, I apparently have to wait for my whole pages to be loadedfirst, and then it will all pop out together, making the wait to be longer than usual. Here's the url of my blog : http://papierrevue.blogspot.com/

Would you mind helping me? Thanks a lot!

Reply

Neysa Kristanti May 25, 2014 at 6:07 PM

Thanks for the explanation.What can I prevent that the slide show is shown on every page? It's only supposed to appear onthe front page.

Reply

Anonymous May 27, 2014 at 11:16 AM

This worked perfectly! Thank you!

Reply

Louann Brown August 21, 2014 at 10:48 AM

Thanks a lot, it's great slider,

Reply

Esperanza September 1, 2014 at 6:27 PM

Very Nice

Reply

bachonkapakistan October 15, 2014 at 7:10 AM

Hi Bro, Slider is superb and simple as silk, can u help me to change the navigation arrows to darkcolor and the dot navigationt o show on the top. if possible to have double navigation arrows oneon the top and one on the bottom.

Reply

Admin & Author InIndiaNow.In October 24, 2014 at 7:54 PM

Thank you very much, I love this slider! I would like the container box was smaller, 600x400, if Ichange here if I change here".flexslider .slides img {width: 90%; display: block;}"is not centeredwith respect to the box.No know what the solution. thank you very much

Reply

Evaviento October 28, 2014 at 12:17 AM

I used it on my blog! It works perfectly in every place EXCEPT the one I want it. I want it under thepage titles, where it is now. But the image is supposed to be in the middle and the little circlesunder the images are supposed to be in the center under the image... I don't know why, butthey've become big and distorted.

Here's a link to my blog: http://ijsmetpindakaas.blogspot.nl/

Do you have any idea to fix this..? Maybe you can help me? I'd like to have the pictures coveringup the whole length and be LESS high... And I'd like to have the dots under the image back in the

usual place please, help me?

Reply

Mieke V. November 3, 2014 at 4:14 AM

ar Admin, Thanks for this awesome slider. Moreover, how to make the slider to work on blog'shomepage alone.

Reply

Vivek November 9, 2014 at 11:21 AM

ar Admin, Thanks for this awesome slider. Moreover, how to make the slider to work on blog'shomepage alone.

Vivek November 9, 2014 at 11:21 AM

8/24/2015 FlexSlider Basic Image Slider Widget for Blogger ~ ISFB

http://imagesliderforblogger.blogspot.in/2014/01/flexsliderbasicimagesliderwidget.html#.Vdsuvfmqqko 7/7

:﴿ :‐﴿ :﴿﴿ =﴿﴿ :﴾ :‐﴾ :﴾﴾ :d :‐d @‐﴿ :p :o :>﴿ ﴾o﴿ [‐﴾

:‐? ﴾p﴿ :‐s ﴾m﴿ 8‐﴿ :‐t :‐b b‐﴾ :‐# =p~ :‐$ ﴾b﴿ ﴾f﴿ x‐﴿ ﴾k﴿

﴾h﴿ ﴾c﴿ cheer

Sign out

  Notify me

Enter your comment...

Comment as:  Aneesh Ps (Google)

Publish   Preview

© 2011 Image Slider For Blogger Organized by dimpost | Powered by blogger.com

Posts RSS ∙ Comments RSS Back to top

 

Reply

Hello, thank you for such a easy‐to‐follow tutorial to add a cute slider in Blogger.

I was wondering if you have any ideas how to make it to show only in the mail pages and "hide" inthe archive pages.

Thank you

Caterina~

Reply

Anonymous November 27, 2014 at 4:18 AM

Hi,

I've been trying to find a way to add a great slider and I love this one. But could you help me solvewhy it is totally not looking like what you have?http://grandmaslovepantry.blogspot.com/

also how to add more images? The images I have are not loading too.

Thank you so much!

Reply

Anonymous December 4, 2014 at 6:51 PM

Nice slider, thx for the sharing, how can I text below the images?

Reply

etem January 3, 2015 at 6:57 AM

Perfect, thank you!! My images are blurry, but I will dive into that later and try to figure it out.

Reply

Dawn Farias February 25, 2015 at 9:40 AM

So simple and it works! Thanks!

Reply

Hanniz Envato March 18, 2015 at 5:31 AM