Coin Slider: Image Slider with Unique Effects

April 4th, 2010 | Projects, jQuery | 939 Comments

After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider.

coin-slider

Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. Basically it’s a latest (and improved) version of jqFancyTransitions but with new ‘fancy’ transitions effects.

Demo pagesee how it works Downloadtry it for yourself

jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. And that’s the main difference. With changing order of appearing those squares I achieve random, swirl, rain and straight effects.

While I was working on this I felt like I’m on college again. Creating order of squares appearance remind me on my college projects when I spent few night and days trying to solve some problem. Random and straight was simple, but swirl effect give me some trouble. Fortunately, I’m working with Milos Popovic who like to solve those kind of problems and he help me about swirl function. Kudos to Milos!

For rain effect I spent few rainy hours to built it and that’s why I gave him that name. Naming things is something that I’m not good at.

How to use

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>

Example

Coin Slider have a lot of options for helping you set slider as you want. If you want to have 900px wide slider, without navigation and with 5sec delay between images you’ll do this:

<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
	});
</script>

List of all 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

Notes

Be careuful with spw and sph because large numbers can cause transitions problems.
If you don’t set effect all effects will be implemented by random.

Check the demo of ‘The More Awesome jQuery Image Slider’

Comments [ 939 Comments ]

Roch
February 2, 2012

Hi! Thank you for this cool slider.
Joe
February 2, 2012

Hi,

great job works out of the box. One question.
Is there any easy way to remove “next” and “prev” when hovering the image but still having the squares for navigation?
ally
February 2, 2012

This is a really nice plugin, nice and light weight. Thanks for sharing.
theefunklord
February 2, 2012

@Joe:

You can modify the coin-slider.js or coin-slider.min.js file to remove the “prev” and “next.”

In the coin-slider.js file (Around line 238 or so) look for this:

$(’#cs-navigation-’+el.id).append(”prev“);
$(’#cs-navigation-’+el.id).append(”next“);

The ‘Prev’ and ‘Next’ are there to be changed. You can substitute the “prev” with HTML for a non-breaking space “ ”
and you’re good to go. You should have functioning black tabs.

Just be sure not to include quotation marks as they may mess with the javascript…
Good luck!
Steven
February 2, 2012

Hello
Thank you for the great script! It’s amazing!
One question, is it possible to remove the links in such a way that when you hover over the slider, it doesn’t show the link hand? I’ve removed the physical links in my HTML code, but when I hover over it, it shows the link hand, and when I click it, it scrolls me to the top of the page. Thanks for the help!
Steven
February 2, 2012

Oop, just kidding, I figured it out. Thanks again for the script, and sorry for the spammy question!
Mujtaba
February 3, 2012

The page looks messy when the java script was turned off, is their any way to put scroll bar on that #coin-slider so that if some one has disable javascript the page do not look haphazard.

Looking forward for solution.
Jaymar
February 3, 2012

Thank you for this awesome script. Kudos.
Irshad
February 3, 2012

Hi! Thank you for this cool slider.
Pavel
February 3, 2012

How i can move description block
Pavel
February 3, 2012

found it, sorry
Joe
February 3, 2012

Hello,

thank you for your replay. I wanted to get rid off the next and prev buttons completely. with “but still having the squares for navigation?” I meant the bottom squares.

.cs-navigation-coin-slider {
visible: false;
}

doesn’t work for a quick solution!
Any ideas how to remove next and prev and its function?
spiros
February 3, 2012

Is it possible to make coinslider show in all pages of my website and not only on my default page?