FlexSlider Basic Image Slider Widget for Blogger

FlexSlider for Blogger

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 adjust automatically. Here it is customized for blogger/blogspot so you can just copy and paste the code to install on your blogger blog.

Check out live demo



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.
<!-- SLIDER CSS -->
<style type="text/css">
/*
 * jQuery FlexSlider v2.2.0
 * 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;
}

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}

#flex-isfb {
    overflow: hidden;
    position: relative;
    min-height: 200px;
    padding: 3px;
}


/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {
    width: 100%;
    display: block;
}

.flexslider .slides,
.flexslider .slides img,
.flex-direction-nav {
    margin: 0 !important;
    padding: 0 !important;
}

.flex-pauseplay span {
    text-transform: capitalize;
}


/* Clearfix for the .slides element */

.slides:after {
    content: "\0020";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .slides {
    display: block;
}

* html .slides {
    height: 1%;
}


/* No JavaScript Fallback */


/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */

.no-js .slides > li:first-child {
    display: block;
}


/* FlexSlider Default Theme
*********************************/

.flexslider {
    margin: 0 0 60px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    -o-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    zoom: 1;
}

.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.loading .flex-viewport {
    max-height: 300px;
}

.flexslider .slides {
    zoom: 1;
}

.carousel li {
    margin-right: 5px;
}


/* Direction Nav */

.flex-direction-nav {
    *height: 0;
}

.flex-direction-nav a {
    text-decoration: none;
    display: block;
    width: 40px;
    height: 45px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.flex-direction-nav .flex-prev {
    background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent;
    left: -50px;
}

.flex-direction-nav .flex-next {
    background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent;
    right: -50px;
    text-align: right;
}

.flexslider:hover .flex-prev {
    opacity: 0.5;
    left: 10px;
}

.flexslider:hover .flex-next {
    opacity: 0.5;
    right: 10px;
}

.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
    opacity: 0.9;
}


/* Pause/Play */

.flex-pauseplay a {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 10px;
    opacity: 0.8;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
    color: #000;
}

.flex-pauseplay a:before {
    font-family: "flexslider-icon";
    font-size: 20px;
    display: inline-block;
    content: '\f004';
}

.flex-pauseplay a:hover {
    opacity: 1;
}

.flex-pauseplay a.flex-play:before {
    content: '\f003';
}


/* Control Nav */

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}

.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.flex-control-paging li a:hover {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    cursor: default;
}

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

.flex-control-thumbs img {
    width: 100%;
    display: block;
    opacity: .7;
    cursor: pointer;
}

.flex-control-thumbs img:hover {
    opacity: 1;
}

.flex-control-thumbs .flex-active {
    opacity: 1;
    cursor: default;
}

@media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev {
        opacity: 1;
        left: 10px;
    }
    .flex-direction-nav .flex-next {
        opacity: 1;
        right: 10px;
    }
}
</style>
<!-- SLIDER HTML -->
<div id="flex-isfb">
    <!-- Preloader -->
    <div id="preloader"></div>
    <style>
    /* Preloader */
    
    #preloader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        /* change if the mask should have another color then white */
        z-index: 999999999999;
        /* makes sure it stays on top */
    }
    </style>
    <div class="flexslider">
        <ul class="slides">
            <li>
                <a href="http://dimpost.com">
                    <img src="http://project.dimpost.com/flexslider-basic/img/1.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                    <img src="http://project.dimpost.com/flexslider-basic/img/2.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                    <img src="http://project.dimpost.com/flexslider-basic/img/3.jpg" />
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- SLIDER JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: true,
        directionNav: true,
        easing: "swing",
        slideshowSpeed: 3000,
        animationSpeed: 600,
    });
});
</script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function() {
        $('#preloader').delay(350).fadeOut('slow');
    })
    //]]>
</script>

 3. Save, and we are done.


NOTE: 
  • Forget about slider width and height, it will adjust automatically.
  • Replace slider images(search <img src with your own uploaded images (You 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...
$('.flexslider').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: true,
    easing: "swing",
    slideshowSpeed: 3000,
    animationSpeed: 600,
});


Have fun! Don't forget to say thanks :)
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

112 comments

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

    ReplyDelete
  2. I do not know how to change the pictures! help

    ReplyDelete
  3. 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://czyta-czyten.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?

    ReplyDelete
  4. 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.

    ReplyDelete
  5. 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?

    ReplyDelete
    Replies
    1. @Jot, Don't you notice this slider is already fluid/responsive! and its width is 100% :)

      Delete
  6. 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! :)

    ReplyDelete
    Replies
    1. 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 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2);

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

    ReplyDelete
    Replies
    1. @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 :)

      Delete
  8. http://demotesing.blogspot.in/2014/02/testing-slicebox-image-slider.html

    ReplyDelete
  9. 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/Capture+d%E2%80%99e%CC%81cran+2014-02-16+a%CC%80+12.14.41.png

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

    (Ps : please excuse my english, i'm french ;))

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

      Delete
  10. 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

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

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

      Delete
  12. 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!

    Cheers!

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

    ReplyDelete
    Replies
    1. add -
      randomize: true
      just after
      animationSpeed: 600,

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

      Delete
  14. 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

    ReplyDelete
  15. 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

    ReplyDelete
  16. Thank you so much! It helps a lot!

    ReplyDelete
  17. 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.

    ReplyDelete
  18. 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 page(home)?

    Thank you a lot!!

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

    Thanks

    ReplyDelete
  20. I can't seem to get this to work…I am getting some sort of js error
    http://template-sitebdesign.blogspot.com/p/portfolio.html

    ReplyDelete
  21. 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!

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

    ReplyDelete
  23. 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.

    ReplyDelete
  24. 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?

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

    ReplyDelete
  26. Hi, I can not get the code to work. All I get is a blank box. Please kelp. Here is url http://www.mycraftingchannel.com/. You will see the blank box above my posting area. Same thing if I add it to the sidebar.

    ReplyDelete
  27. Thank You Sir!

    Thank You So Much for your code!
    This is Tremendous n Fantabulous n Unbelievable!!

    This is really driving traffic to my site!

    Please Visit n See my Work on:

    http://telugumoviebgms.blogspot.in

    ReplyDelete
  28. Hi there, I'm not sure why but mine doesn't come up at all. It's just blank. What am i doing wrong?
    http://www.lovethread.com.au/

    ReplyDelete
  29. Thanks for this. I've added it to my blog but the slider only displays in my right hand side menu. I've tried to drag the gadget to the main section in my layout but it doesn't seem to work. Can you help?

    ReplyDelete
  30. Hi

    I only want this to appear on my homepage, but at the moment it appears on all my blog pages. how can i restrict to just homepage?

    ReplyDelete
  31. 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/

    ReplyDelete
  32. 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; -webkit-backface-visibility: hidden;} /* Hide the slides before the 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 !important; }
    .flex-pauseplay span {text-transform: capitalize;}

    ReplyDelete
  33. It doesn't work on one of my blog I don't understand why :(

    ReplyDelete
  34. How do you set up the slider's images so that when clicked it takes you to the post that the image is from? I just want the images to correspond to my blog posts. Thanks.

    ReplyDelete
  35. 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...

    ReplyDelete
  36. Hi! Really loving this one :D
    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!

    ReplyDelete
  37. 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.

    ReplyDelete
  38. Thank you for your tutorial.
    But how can I prevent that the slide show is shown on every page? It's only supposed to appear on the home page.

    ReplyDelete
  39. this template works great! the only issue is that there are these question marks above my photos. how can i fix that?

    ReplyDelete
  40. Thanks you very much for this script. Please how do I add my own images and set a url to each of them such that when a user clicks on the images they are redirected to another page.

    ReplyDelete
  41. https://lh6.googleusercontent.com/-Q5lMkgcmVR4/T2WEWkNi3MI/AAAAAAAACZ4/7VBYeVbx7kA/s36/01.gif

    ReplyDelete
  42. Does this also work for blogposts?

    ReplyDelete
  43. HI Admin I want to resize the slider and increase the width and decrease the length how do i do it.

    Blog URL : http://reviewsxpress.blogspot.in/

    ReplyDelete
  44. Hi! I need help, I am trying to install the slider but it doesn't appear the photos

    ReplyDelete
  45. Let me know, to use this slider on my Blogpost? Please tell me thanks...

    ReplyDelete
  46. This worked perfectly! Thank you! :)

    ReplyDelete
  47. Hi, great post! but I have a doubt, how can I do if I want to add a text on the right side of this slider?

    Thanks!

    ReplyDelete
  48. getting an ssl error after using this code on www.thestylecocktail.in How do I fix it? pls help.

    ReplyDelete
  49. Thanks a lot, it's great slider, :>)

    ReplyDelete
  50. i want to my blog seting same u r seting please help me admin

    ReplyDelete
  51. Hi! Thanks for this! :) I tried installing it on my page but it's not showing up. Hope you can help me. Thanks! www.sharkmaine.com

    ReplyDelete
  52. Hi, great code. had been looking for this for sometime. The height of the image not showing properly as in the url here http://skjongphotography.blogspot.com/2014/07/testing-slider-gallery.html.

    One more thing, how to replace the thumb show number of image with number instead. like pic 1/12, 5/12/ 8/12.....

    thanks

    ReplyDelete
  53. I'm able to get this to work on my one blogger site, but not the other? Do you know why this could be? If you could help I'd really appreciate it!! Thank you in advance!

    Jaclyn
    JaclynStokes@hotmail.com

    ReplyDelete
  54. Is there a way to shrink the height of the slider? I want it to be less block and more of a rectangle. Thanks!

    ReplyDelete
  55. If you are searching best seo blogger gadgets/widgets free!

    Image Slider Widgets Jquery please visit to link for additional info

    ReplyDelete
  56. Never could get it to work on my site. All that showed up was a thin white line across my page. :(

    ReplyDelete
  57. 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.

    ReplyDelete
  58. 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

    ReplyDelete
  59. 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?

    ReplyDelete
  60. ar Admin, Thanks for this awesome slider. Moreover, how to make the slider to work on blog's homepage alone.

    ReplyDelete
  61. ar Admin, Thanks for this awesome slider. Moreover, how to make the slider to work on blog's homepage alone.

    ReplyDelete
  62. 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" in the archive pages.

    Thank you :)

    Caterina~

    ReplyDelete
  63. 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!

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

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

    ReplyDelete
  66. This is great! Do you know how can I make the slider shows my latest posts automatically?

    ReplyDelete
  67. Thanks. I just applied it to my blog...www.ladiesandudes.blogspot.com

    ReplyDelete
  68. So sad. It doesn't work. :-(
    I can only see a white line and no pictures.

    ReplyDelete
  69. I would like tu put more than three images, how can I do that possible? Thanks

    ReplyDelete
  70. if want to put my blog pictures how would i do it? www.africapple.blogspot.com

    ReplyDelete
  71. how would i put my personal choice pics

    ReplyDelete
  72. i can't seem to get it to work for me. please help
    https://deziji.blogspot.com

    ReplyDelete
  73. Hello, sorry but I don't speak English well. I wanted to know if you can change the code to recent posts? Thanks a lot,

    Viviana

    ReplyDelete
  74. hey friend, nice sliders,
    how can we add text like http://www.woothemes.com/flexslider/

    ReplyDelete
  75. Is there a way to make it not auto play?

    ReplyDelete
  76. hello, this is an awesome slideshows, but i was wondering how to add the images, because there are just three images on there, and i want to add more images on the slider, it would be so awesome if you can help me ,thanks a lot before :)

    ReplyDelete
  77. Thanks! I'm using this at the top of my blog rather than the side...how do I make the size larger, like a big square, rather than the long banner rectangle? This is way more simple compared to other things I've tried so far!

    ReplyDelete
  78. Nice slider i m always like this type of work always help ful for new bee thanks for share

    ReplyDelete
  79. I absolutely LOVE this slideshow...(f) it's exactly my style. I will need to adjust the height and weight to be square 500px, but what I'm really hoping is for you to help me figure out how to add this coding to individual POSTS (NOT as a widget to appear on every page) because I have different slideshows for different posts and the slideshow will look SOOOO much better than a table full of 15 images (and not be such a long post so not as much scrolling). :( I've been trying to figure it out on my own but I am soo stuck.

    ReplyDelete
    Replies
    1. Hi! I have the same question, I only want the slide on the main page. Also, I was wondering if it is possible to display my recent posts instead of loading images. Thanks so much in advanced for your help and awesome tutorial :) Best regards from Venezuela. vivalaglamblog@gmail.com

      Delete
    2. I have the same question as Jennifer, I only want the slide on the main page and I want to display my recent posts with my post images. Also, if I can add a caption or the post title...

      Delete
  80. Thanks a lot mate! :)

    ReplyDelete
  81. how to add caption image on slide??

    ReplyDelete
  82. This is Just Awesome (h)

    ReplyDelete
  83. Thank you a lot ! Simple and perfect :)

    ReplyDelete
  84. just come here to say thanks for this awesome slider! I had search all over the internet but none attracted me but yours. I had an issue here, how do I adjust it height and width so that it could fit the way I want it?

    Thanks

    ReplyDelete
  85. Finally I've found this slider! Thank you very much :D

    ReplyDelete
  86. OMG! at last good looking slider that RLY works! ty <3 u don't have idea how long i was looking for something like this!

    ReplyDelete
  87. Hello Admin, I would like to ask permission from you. Can I use this code to complete my project from web development.

    ReplyDelete
  88. Awesome looking slider!!! I found a minor issue regarding this image slider. When I press the back arrow on the slider while it is displaying the first image, there is a slight freeze before changing the image. How do I fix it? Thanks

    ReplyDelete
  89. How do I reduce the border thickness for flexSlider "DEMO 2: Custom Sized Slider By A Specific Label"?

    Changing the following won't work:
    .flexslider {
    border: 1px solid #cacaca;

    ReplyDelete
  90. Hey there, I'm attempting to use the code for this slider, but it's coming out all jacked up. I figured out how to make it so it isn't stretched the full width of the page, but I can't figure out how to change the image height. How do I fix this? http://i50.photobucket.com/albums/f301/homesickwanderlust/Screenshot%2056_zps0kum2nzc.png

    ReplyDelete
  91. I have my slider set to take up the full width of the page, or close to it. The image size works fine for me, but the size of the widget makes the little grey buttons underneath it really big and obvious. Is there a way I can make those smaller without affecting image size? Thanks!

    ReplyDelete
  92. This is amazing just what i am looking for !
    only one question how to add your own pictures to the code?
    Thankyou!

    ReplyDelete
  93. What if I want to size this myself instead of it automatically adjusting? It's way bigger than I want. When I found a way to shrink the image in the code, it left a big white space surrounding where the slider would have normally taken up space. Is there another slider that will let me choose the size?

    ReplyDelete
  94. Hi,

    I put 3 of the sliders on my home page but only one works. The other two are just a white square. Can this be fixed? Thanks

    ReplyDelete

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2013- Image Slider For Blogger
Created & Maintained by Shuvojit Das
Powered by blogger.com
Privacy Policy | Contact Me
Back to top