jQuery Carousel Slider for Blogger (FlexSlider)

blogger carousel
This is a responsive jQuery carousel slider. This amazing slider developed by flexslider.woothemes.com. It has some really cool features that makes you like it. The most cool feature is it is fully responsive; you don't have to tensed about the sliders width / height even all images width and height are auto adjustable. And also you can set minimum/maximum number of images to be appear on occasion of various size screen/browser. So overall it is quite a beautiful carousel slider. 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 by clicking the link below.


Let’s Install the jQuery Carousel Slider to your Blogger Blog

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

<style type="text/css">
/*
* jQuery FlexSlider v2.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 {
    margin: 0;
    padding: 0;
}

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


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

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

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


/* Clearfix for the .slides element */

.flexslider a.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.1);
    font-size: 14px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}

.slides:after {
    content: ".";
    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;
    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);
    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 */

.flexslider li {
    border: 0 none !important;
    padding: 0 !important;
    text-indent: 0 !important;
}

.flex-direction-nav a {
    width: 30px;
    height: 30px;
    margin: -20px 0 0;
    display: block;
    background: url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    cursor: pointer;
    text-indent: -9999px;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.flex-direction-nav .flex-next {
    background-position: 100% 0;
    right: -36px;
}

.flex-direction-nav .flex-prev {
    left: -36px;
}

.flexslider:hover .flex-next {
    opacity: 0.8;
    right: 5px;
}

.flexslider:hover .flex-prev {
    opacity: 0.8;
    left: 5px;
}

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

.flex-direction-nav .disabled {
    opacity: .3!important;
    filter: alpha(opacity=30);
    cursor: default;
}


/* 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;
    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);
    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 .active {
    opacity: 1;
    cursor: default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 210,
            itemMargin: 0,
            minItems: 1,
            maxItems: 4
        });
    });
});
</script>
<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
        </li>
    </ul>
</div>

4. Save, and we're done.

NOTE:
  • Forget about width and height it will adjust auto.
  • Replace the colored image URL with your own uploaded image URL(You can upload image on blogspot, flickr etc.) 
  • There is some other things you can change, see below. I guess I don't have to explain that because they are named like as they are.
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
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...

39 comments

  1. how to make this slider infininite loop

    ReplyDelete
  2. how to make it appear in homepage only?...

    ReplyDelete
  3. What is the exact dimensions that this slider takes btw? I love it but my images are all different crops and keep showing white borders.

    ReplyDelete
  4. Larkin Satu You can change "animationLoop: false," to "animationLoop: true,".

    ReplyDelete
  5. Thank you for sharing this Post. We can now use this Image Slider tool in Blogger blog. Thank you for sharing the code.

    ReplyDelete
  6. Hi. Its possible to use 2-times flexslider on that same page? Acctualy when I put second flexsider with other settings min & max items - dont work.

    ReplyDelete
  7. It´s not ajdusting to the images size :(

    ReplyDelete
  8. Hi, this slider is amazing! Exactly what I was looking for! Thank you very much!
    I'm just having a little trouble.. I don' know what really happens, so I thought maybe you can help me a bit..
    When we open the blog, it has some kind of delay that shows just the first photo very big for a second, and then appears all the slider...
    So, do you have a lead about what could happend, please?
    This is the blog: http://igzemple.blogspot.com.br/

    ReplyDelete
  9. it's amazing .. but when i put it in my blog, the pics disappear .

    ReplyDelete
  10. My template already has a different JQuery Slider, but I wanted to ad this one below it. But once I add the widget, my Main Slide stops working. Can you please let me know how I can fix this issue? Would really appreciate it. my website is www.tropics.atl.com

    Thanks

    ReplyDelete
  11. I got it, If your using this Slider on the same page with an existing JQuery Slider, just delete (script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"><> www.tropicsatl.com

    ReplyDelete
  12. its great widget but when i paste these codes on my blog its only show a line in result . what to do
    my blog is http://tabletrom.blogspot.com

    ReplyDelete
  13. How can you make the photo a link?

    ReplyDelete
  14. I cant get it to work, I copied and pasted the code and added my own pic URL but it wont show up.
    What am I doing wrong?
    rkirkman1027@yahoo.com

    ReplyDelete
  15. Hi there! I'm not a real html hero, so here is a sort of basic (stupid?) question.. I do not know which URL I need to copy (in stead of the pink word) for the widget to show all of my blog images. Because I want to show more than one image (it's a slider..), which URL do I use to let the widget show multiple images? Thanks a lot:)

    ReplyDelete
  16. I put this in my blog but a line appears in the bottom front of the slider across the whole width. Does anyone know why that is?

    ReplyDelete
    Replies
    1. Raymundo Estoy Igual... Qué Será?? : -?

      Delete
    2. Hola necesito ayuda Puse esto en mi blog, pero una línea aparece en la parte inferior delantera de la corredera a través de todo el ancho. ¿Alguien sabe qué es eso?

      Delete
  17. Hello! I put this on my blog and so far it's working awesome. However, in your demo 1, the top slider is huge and i'd like it that size. What are the dimensions for those and where do I change the sizing? I've toyed with it a few times but never got it to work. Please share your wisdom oh wise one! :)

    ReplyDelete
  18. Good work thanks I Use it ot my www.subbd.blogspot.com but I need a help I want to use every image with the specific URL please try to help

    ReplyDelete
  19. it work good in the bottom of my blog but at top not why I want to place it at the top can you help please

    ReplyDelete
  20. The points below are too big for me. Can I change this?

    ReplyDelete
    Replies
    1. Could you? They look fantastic in the demo but awful big for me.

      Delete
  21. this is amazing and i cannot thank the creator enough!

    ReplyDelete
  22. How can I convert this to your demo 2?

    ReplyDelete
  23. hola, muy buen slider (o) , como puedo hacer vertical?
    Hello, very good slider (o), how I can do vertical?

    ReplyDelete
  24. This code is amazing, thank you so much for letting us use it! If you have time to reply, I was wondering how to go about removing the border around it? Thanks in advance!

    ReplyDelete
  25. Hey,

    is there a possibility to link the picture to weblinks? I mean is it possible to click on a picture in the slideshow and then getting to an other website.
    Thank You

    ReplyDelete
  26. THANK YOU SOOOOOOOOOOO MUCH !! I spen like 3 hours trying to find this !! I LOVE YOU

    ReplyDelete
  27. Thank you. I just stuck in there and it worked great. Fixing up to personalize. Awesome work and very well done. Thanks.

    ReplyDelete
  28. Is there a way to make this work for hubspot? I've been looking everywhere for a code exactly like this!

    ReplyDelete
  29. Bravo ! et merci beaucoup ! it's fantastique ! (h)

    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