8/24/2015

FlexSliderBasicImageSliderWidgetforBlogger~ISFB

Image Slider For Blogger

All image slider for Blogger and content slider is here.

Home

JavaScript Slider

jQuery Slider

CSS3 Slider

FlexSlider Basic Image Slider Widget for

Blogger
Like

14

Tweet

12

448

Blog Archive
2014 1
January 1
FlexSlider Basic Image Slider Widget
for Blogger
2013 5

Follow by Email
Emailaddress...

Submit

Popular Posts
FlexSlider Basic Image
Slider Widget for Blogger
This is a responsive jQuery
image slider. This simple
but amazing slider
developed by woothemes.com. It has
some really nice features th...
Pure CSS3 Image Slider for
Blogspot Cycle Style
Here I came up with a
stylish and hot image slider
for blogger that is just
using pure CSS3. No Javascript or jQuery
is used. So this ...

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

Lets Install theFlexSliderImage 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.

jQuery Image Sliderwow

slider with Thumbnails for
Blogspot
Here I came up with
another awesome image
slider for blogspot. This is a 'jQuery
Image Slider with Thumbnails' created
by WOWS...
Add JavaScript Image
Slider to Blogger Easily
Here Im sharing a cool
JavaScript image slider for
blogger. It could be easily
usable as featured content on blogger
blog. This image s...
jQuery Carousel Slider for
Blogger FlexSlider
This is a responsive jQuery
carousel slider. This
amazing slider developed
by flexslider.woothemes.com. It has
some really cool features ...
Nivo Slider jQuery Image
Slider For Blogger
Today I'm sharing another
awesome, beautiful image
slider for Blogger/
BlogSpot blog. It is made with jQuery.
and of course HTML ...

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

1/7

8/24/2015

FlexSliderBasicImageSliderWidgetforBlogger~ISFB
*http://www.woothemes.com/flexslider/
*
*Copyright2012WooThemes
*FreetouseundertheGPLv2license.
*http://www.gnu.org/licenses/gpl2.0.html
*
*Contributingauthor:TylerSmith(@mbmufffin)
*/

/*BrowserResets
*********************************/
.flexcontainera:active,
.flexslidera:active,
.flexcontainera:focus,
.flexslidera:focus{outline:none;}
.slides,
.flexcontrolnav,
.flexdirectionnav{margin:0;padding:0;liststyle:none;}

/*FlexSliderNecessaryStyles
*********************************/
.flexsliderli{
border:0none!important;
padding:0!important;
textindent:0!important;
marginbottom:0!important;
}
.flexslider{margin:0;padding:0;}
3. Save, and we are done.
NOTE:
Forget about width and heightit will adjust auto.
Replace the pink colored image URL with your own uploaded image URLYou can upload
image on blogspot, flickr etc.
There is some other things you may want to play with, see below. I guess I don't have to
explain 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 :
Like

14

Tweet

12

448

YoulikeFlexSliderBasicImageSliderWidgetforBlogger~ISFB.

at 10:02 PM

Labels: FlexSlider, Image Slider, jQuery Slider, Responsive, Widget

Saysomethingmoreaboutthis...

Share this post

FlexSliderBasicImageSlider
WidgetforBlogger~ISFB
Thankyouforfeaturingallthesolutions.Iwas
playingaroundwithFlexSliderand
encounteredapeculiari...

Related Posts

IMAGESLIDERFORBLOGGER.BLOGSPOT.COM

Close

AddaComment

50 comments

Stevie K

January 29, 2014 at 10:52 PM

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

Zuumisia

February 3, 2014 at 8:40 AM

I do not know how to change the pictures! help

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

2/7

8/24/2015

FlexSliderBasicImageSliderWidgetforBlogger~ISFB
Reply

Karina Graj

February 6, 2014 at 7:51 AM

Thank you for featuring all the solutions. I was playing around with FlexSlider and encountered a
peculiar issue. The code worked great when I tested it on an empty page. However, when I pasted
the 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://czytaczyten.blogspot.com/2014/02/mateusz.html. I reset all the image
properties in the css removed border, padding etc.. I still believe the problem is somewhere in
the template's css, but I can't find it. Do you have any ideas?
Reply

Admin

February 6, 2014 at 10:03 AM

Add this little CSS

.flexslider li {
marginbottom: 0 !important;
}
.flexslider .slides, .flexslider .slides img, .flexdirectionnav {
margin: 0 !important;
padding: 0 !important;
}

It will do what you needed

And let me know.

Reply

Tittle + Jot

February 11, 2014 at 9:21 AM

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

Admin February 19, 2014 at 1:00 AM

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

Lei

February 13, 2014 at 2:36 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
Replies

Admin February 19, 2014 at 1:06 AM

I think you want to remove rightbottom shadow. to do that find this code below...
and remove it.
webkitboxshadow: 0 1px 4px rgba0,0,0,.2; mozboxshadow: 0 1px 4px
rgba0,0,0,.2; oboxshadow: 0 1px 4px rgba0,0,0,.2; boxshadow: 0 1px 4px
rgba0,0,0,.2;

Hasan Al Mehdi

February 14, 2014 at 8:18 PM

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

Admin February 19, 2014 at 1:10 AM

@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

Hasan Al Mehdi

February 14, 2014 at 8:18 PM

http://demotesing.blogspot.in/2014/02/testingsliceboximageslider.html
Reply

Glittering Delirium

February 16, 2014 at 3:16 AM

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
code
http://4.bp.blogspot.com/6mSn6P7zbaw/UwCdypvfLoI/AAAAAAAANIk/7meeVB6z59s/s1600/Cap
ture+d%E2%80%99e%CC%81cran+20140216+a%CC%80+12.14.41.png

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

3/7

8/24/2015

FlexSliderBasicImageSliderWidgetforBlogger~ISFB
Any idea of what I can do to make it right ?
Hoping you'll answer !
Ps : please excuse my english, i'm french ;
Reply
Replies

Admin February 19, 2014 at 1:13 AM

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

Anonymous February 20, 2014 at 4:29 PM

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

Anonymous February 20, 2014 at 4:32 PM

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

Admin February 24, 2014 at 6:15 PM

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

Erin Emocling

February 23, 2014 at 12:08 AM

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, how
do I add clickable texts on the images so the title of the post can appear on every photo?
I appreciate the help!
s!
Reply

Comit d'animation bbc27

February 23, 2014 at 1:49 AM

Very good work.

is it possible to made it " random " ?
Reply
Replies

Admin February 24, 2014 at 6:29 PM

add
randomize: true
just after
animationSpeed: 600,

Admin February 24, 2014 at 6:36 PM

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

zoe seaton

February 23, 2014 at 1:07 PM

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

Jason

February 28, 2014 at 2:04 PM

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

Andy Chan

March 6, 2014 at 12:53 AM

Thank you so much! It helps a lot!

Reply

Show Bobo

March 9, 2014 at 12:21 AM

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

4/7

8/24/2015

FlexSliderBasicImageSliderWidgetforBlogger~ISFB
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 is
displayed first in the slider. Is that what suppose the script doing?
Thank you.
Reply

Mdlina Simona Merca

March 12, 2014 at 4:02 PM

wow! I'm searching for a slider like this from so long! I try to install it on my blog, I'm testing it for
a 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 pagehome?
Thank you a lot!!
Reply

Heidi Bussey

March 12, 2014 at 9:30 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

Bailey B. Stewart

March 13, 2014 at 6:59 PM

I can't seem to get this to workI am getting some sort of js error

http://templatesitebdesign.blogspot.com/p/portfolio.html
Reply

Marta

March 20, 2014 at 2:48 AM

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

Jade Gregory

March 25, 2014 at 9:49 PM

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

Henry Chen

April 7, 2014 at 12:56 AM

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

Irene Caye

April 12, 2014 at 5:56 PM

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

Craig Angus

April 16, 2014 at 7:20 AM

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

Taste Junction

May 6, 2014 at 8:45 AM

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

D'Wayne Wilkins

May 9, 2014 at 11:53 AM

Thanks for this post. I found how to change the size of the pics because at 100% it was too large
for my taste. What do I need to do to have this centered?
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; webkitbackfacevisibility: hidden;} /* Hide the slides before
the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 60%; display: block;}
.flexslider .slides, .flexslider .slides img, .flexdirectionnav { margin: 0 !important; padding: 0

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

5/7

8/24/2015

FlexSliderBasicImageSliderWidgetforBlogger~ISFB
!important; }
.flexpauseplay span {texttransform: capitalize;}
Reply

Kristna

May 21, 2014 at 5:11 PM

Hi, thank you so much for this slider! Its amazing!!

But, i have same problem like Karina Graj, i
have 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

Neysa Kristanti

May 25, 2014 at 6:07 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 loaded
first, 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

Anonymous May 27, 2014 at 11:16 AM

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

Louann Brown

August 21, 2014 at 10:48 AM

This worked perfectly! Thank you!

Reply

Esperanza September 1, 2014 at 6:27 PM

Thanks a lot, it's great slider,
Reply

bachonkapakistan

October 15, 2014 at 7:10 AM

Very Nice
Reply

Admin & Author InIndiaNow.In

October 24, 2014 at 7:54 PM

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

Evaviento

October 28, 2014 at 12:17 AM

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

Mieke V.

November 3, 2014 at 4:14 AM

I used it on my blog! It works perfectly in every place EXCEPT the one I want it. I want it under the
page titles, where it is now. But the image is supposed to be in the middle and the little circles
under the images are supposed to be in the center under the image... I don't know why, but
they'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 covering
up 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

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's
homepage 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's
homepage alone.

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

6/7

8/24/2015

FlexSliderBasicImageSliderWidgetforBlogger~ISFB
Reply

Anonymous November 27, 2014 at 4:18 AM

Hello, thank you for such a easytofollow 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" in
the archive pages.
Thank you
Caterina~
Reply

Anonymous December 4, 2014 at 6:51 PM

Hi,
I've been trying to find a way to add a great slider and I love this one. But could you help me solve
why 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

etem

January 3, 2015 at 6:57 AM

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

Dawn Farias

February 25, 2015 at 9:40 AM

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

Hanniz Envato

March 18, 2015 at 5:31 AM

So simple and it works! Thanks!

Reply

:?

p
h

:
:s

=
m

:d

:d

:t

:b

:#

=p~

:p
:$

:o

:>
b

o
f

cheer

Enteryourcomment...

Commentas:

Publish

AneeshPs(Google)

Preview

Signout

Notifyme

2011 Image Slider For Blogger

Organized by dimpost | Powered by blogger.com

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

Posts RSS Comments RSS

Back to top

7/7