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.
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.- Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript
- 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> - Repeat the code highlighted above.
- Now change the url of the page and image and also change the alt tag with your tag.
- Save your widget, refresh your blog. Now you can see the widget.
The links are not opening when clicked on the images check it.
ReplyDeleteme either, see comment below.
DeleteVery interesting point.
ReplyDeleteA 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.
Hi Chandan,
ReplyDeleteuse 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.
Hi
ReplyDeleteI want to add images dynamically. I am able to do that, but then navigation images are not displayed like Next and Previous
Please reply asap since I am using that in my project
ReplyDeleteseems 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