Beruflich Dokumente
Kultur Dokumente
FlexSliderBasicImageSliderWidgetforBlogger~ISFB
JavaScript Slider
jQuery Slider
CSS3 Slider
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
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
FlexSliderBasicImageSlider
WidgetforBlogger~ISFB
Thankyouforfeaturingallthesolutions.Iwas
playingaroundwithFlexSliderand
encounteredapeculiari...
Related Posts
IMAGESLIDERFORBLOGGER.BLOGSPOT.COM
Close
AddaComment
50 comments
Stevie K
Thank you it works perfectly , One question how do I make it 600px x 400px ?
Reply
Zuumisia
http://imagesliderforblogger.blogspot.in/2014/01/flexsliderbasicimagesliderwidget.html#.Vdsuvfmqqko
2/7
8/24/2015
FlexSliderBasicImageSliderWidgetforBlogger~ISFB
Reply
Karina Graj
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
.flexslider li {
marginbottom: 0 !important;
}
.flexslider .slides, .flexslider .slides img, .flexdirectionnav {
margin: 0 !important;
padding: 0 !important;
}
Reply
Tittle + Jot
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
Lei
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
Hasan Al Mehdi
Bro, its working fine in my test blog but the both navigation arrow mark went down, how to fix it
please help ??
Reply
Replies
Hasan Al Mehdi
http://demotesing.blogspot.in/2014/02/testingsliceboximageslider.html
Reply
Glittering Delirium
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
Erin Emocling
zoe seaton
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
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
Show Bobo
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
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
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
Marta
Jade Gregory
Thank you ! How do you confine the slider to just the home page ?
Reply
Henry Chen
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
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
Thank you, exactly what I was looking for, looks great on my site, www.irobotgamingtv.com
Reply
Taste Junction
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
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
Neysa Kristanti
Thanks a lot!
Reply
Louann Brown
bachonkapakistan
Very Nice
Reply
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
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.
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
Reply
Vivek
ar Admin, Thanks for this awesome slider. Moreover, how to make the slider to work on blog's
homepage alone.
Reply
Vivek
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
etem
Nice slider, thx for the sharing, how can I text below the images?
Reply
Dawn Farias
Perfect, thank you!! My images are blurry, but I will dive into that later and try to figure it out.
Reply
Hanniz Envato
:?
p
h
:
:s
=
m
:d
:d
:t
:b
:#
=p~
:p
:$
:o
:>
b
o
f
cheer
Enteryourcomment...
Commentas:
Publish
AneeshPs(Google)
Preview
Signout
Notifyme
http://imagesliderforblogger.blogspot.in/2014/01/flexsliderbasicimagesliderwidget.html#.Vdsuvfmqqko
7/7