Bloggers
Inspirational, Motivational, Sharing, Devotional
Elastislide- A Jquery Carousel
24 October 2012, 9:05 pm
Elastislide is a responsive jQuery carousel created and published by codrops. This plug in will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid. You can add this plugin in Blogger Template :
DEMO
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>
Now change the url of the page and image and also change the alt tag with your tag and save.
source:blogtipsntricks
24 October 2012, 9:05 pm
DEMO
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>
Now change the url of the page and image and also change the alt tag with your tag and save.
source:blogtipsntricks
