Mar 7, 2011

Amazing Coin slider with unique effects using jQuery

Usage:
Download jQuery, Coin Slider javascript file and CSS file and include them on your page:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
Add slider content and create one div with an id and put images and image descriptions, similar to:

<div id='coin-slider'>
 <a href="img01_url" target="_blank">
  <img src='img01.jpg' >
  <span>
   Description for img01
  </span>
 </a>
 ......
 ......
 <a href="imgN_url">
  <img src='imgN.jpg' >
  <span>
   Description for imgN
  </span>
 </a> 
</div>
At the end all you have to do is to call Coin Slider:

<script type="text/javascript">
 $(document).ready(function() {
  $('#coin-slider').coinslider();
 });
</script>
List of Options:
width: 565, // width of slider panel
height: 290, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links 
hoverPause: true // pause on hover

VIEW DEMO
DOWNLOAD

No comments:

Post a Comment

Test post after a long time

i want to see the post