Clean & Simple Image Slider Plugin - Coin Slider

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.