Clean & Simple Image Slider Plugin - Coin Slider
File Size: | 6.3 KB |
---|---|
Views Total: | 14749 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Coin Slider is a jQuery Slider plugin that allows you to create a Clean & Simple Image Slider with unique transition effects. It features Auto slide, Navigation box and Linking images.
Basic Usage:
1. Include scripts and css in your head section
<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" />
2. Markup
<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>
3. Call the plugin
<script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider(); }); </script>
4. Options
<script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 }); }); </script> 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
Change Log:
2017-05-16
- Fix init images in iOS
2014-07-16
- Fix when brackets in background-image-url
2013-04-12
- Updated to v1.0.0
This awesome jQuery plugin is developed by kopipejst. For more Advanced Usages, please check the demo page or visit the official website.