Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

Elastislide – A Responsive jQuery Carousel Plugin For Blogger

On By // 7 comments
Advertisement
Elastislide is a responsive jQuery carousel plugin created and published by codrops. Now it is available for blogger blogs. Its special feature is that it will automatically adapt its size and its behavior in order to work on any screen size.You can add this widget by the following steps.
Look at Preview of this Widget.

 
Live Demo

How to Install Elastislide jQuery Carousel For Blogger?

Adding jQuery plugin to the template:

As this widget based on jQuery plugin, First you need to have a jQuery Plugin in your Blog template.
This Step is not Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
  • Add the below line of code before </head> tag.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>

Adding Widget Code to blogger

These steps are to add the Elastislide Carousel Plugin to your blog.
  1. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript
  2. Paste this code inside it
    <style>
    /* Elastislide Style */
    .es-carousel-wrapper{ background: #101010; padding:10px 37px; -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; position:relative;}
    .es-carousel{ overflow:hidden; background:#000;}
    .es-carousel ul{ display:none;}
    .es-carousel ul li{ height:100%; float:left; display:block;}
    .es-carousel ul li a{ display:block; border-style:solid; border-color:#222;}
    .es-carousel ul li a img{ display:block; border:none; max-height:100%; max-width:100%;}
    .es-nav span{ position:absolute; top:50%; left:12px; background:transparent url(http://3.bp.blogspot.com/-C2VgY35Z-Cg/T0pFL1jGQMI/AAAAAAAAAmw/OWe5BvaFDfA/s1600/nav.png) no-repeat top left; width:14px; height:26px; margin-top:-13px; text-indent:-9000px;
     cursor:pointer; opacity:0.8;}
    .es-nav span.es-nav-next{ right:12px; left:auto; background-position:top right;}
    .es-nav span:hover{ opacity:1.0;}
    </style>
    <div class="es-carousel-wrapper" id="carousel">
    <div class="es-carousel">
    <ul>
    <li>
    <a href="URL OF THE PAGE">
    <img alt="ALT TAG" src="URL OF THE IMAGE" />
    </a>
    </li>

    </ul>
    </div></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
    </script>
    <script src="http://blogtipsntricks.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript">
    </script>
    <script src="http://blogtipsntricks.googlecode.com/files/jquery.elastislide.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    $('#carousel').elastislide({
    imageW : 180,
    minItems : 5
    });
    </script>
  3. Repeat the code highlighted above.
  4. Now change the url of the page and image and also change the alt tag with your tag.
  5. Save your widget, refresh your blog. Now you can see the widget.  
Any Suggestions about this widget are welcome.Feel free to share this widget and leave your comments.

7 comments:

  1. The links are not opening when clicked on the images check it.

    ReplyDelete
  2. Very interesting point.
    A relevant link would be http://truelogic.org/wordpress/2012/06/09/create-a-multi-carousel-using-jquery-and-jcarousel/

    which shows how to make a multicarousel using two jcarousel instances.

    ReplyDelete
  3. Hi Chandan,

    use this code to find anchor tag id :

    onClick : function( $item ) {
    // alert('Naresh : ' + $item.attr("id"));
    $("#" + $item.attr("id") + " > a").each(function(i, ele) {
    //alert($(ele).attr("href"));
    window.location = $(ele).attr("href");
    }); },

    it's work for me.

    ReplyDelete
  4. Hi

    I want to add images dynamically. I am able to do that, but then navigation images are not displayed like Next and Previous

    ReplyDelete
  5. Please reply asap since I am using that in my project

    ReplyDelete
  6. seems that the a href won't link / or at least for some reason it won't work for me... if the link is anything other than #; linking to another page doesn't seem to work at all, unless you right-mouse click and Open. any thoughts/help?

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep