Coin Slider: Image Slider with Unique Effects

April 4th, 2010 | Projects, jQuery | 1,092 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 [ 1,092 Comments ]

Ronald
April 27, 2010

Hi Ivan, great-nice-easy to implement plugin…thank you. One small thing i would like to do is to set the autoplay off. So that way i get the fancy transitions while having 6 sliders in a page and not getting stop-motion like in IE.
Please…

greetings from santiago, chile.
sandy
April 28, 2010

Is there a way to add more strips to it?
Stephen
April 28, 2010

hi, found this snippet of CSS with another slider (Nivo I think) that gives nice border around it and margins (add a div above the regular div). Think it may be firefox only – I cannot get even the basic slider to work in IE8 for some reason (anyone solve that?).

#sliderDiv {
position:relative;
margin:10px 30px 30px 30px;
-moz-box-shadow:0px 0px 10px #333;
-webkit-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
}
John S.
April 29, 2010

Is it just me, or does this not work in IE6? I’m just trying to view the demo and it won’t work properly. The image loads, then disappears. Sometimes the “coins” work (partially), but mostly it doesn’t seem to work.

I’d love to use this on a new site, but I need it to work correctly in IE6, too.
Sam
April 30, 2010

Hi Ivan,
Thank you for this great slideshow.
Just one question :
I tried to change “prev” and “next” as you said

Below coinslider() call add those lines of code :
$(’.cs-prev’).html(’text for prev’);
$(’.cs-next’).html(’text for next’);

But it doesn’t work.

Here is my code :

$(document).ready(function() {
$(’#coin-slider’).coinslider({ width: 566, height: 240, effect: ’straight’, delay: 8000, opacity: 0.5});
$(’.cs-prev’).html(’text for prev’);
$(’.cs-next’).html(’text for next’);
});

Could you please give me a hand to fix it ?
Sam
April 30, 2010

Another question : is it possible to put the title in bold ?
dhananjai
May 1, 2010

hi there,
i want to use coin slider on my website which is in wordpress, i tried to put the code in header but it is not working, can you suggest me please that how can i use this slider in wordpress. please reply soon.
Max
May 1, 2010

Thanks for the excellent plugin!
Is there any way to use thumbnails as navigation buttons?
Sam
May 3, 2010

Hi there,

It’s OK for “$(’.cs-prev’).html(’text for prev’); $(’.cs-next’).html(’text for next’);”, it was a cache problem !

But, about the bold title, how can we do that ?
Lazarevic Ivan
May 3, 2010

@sandy
There is no strips in this slider.

@dhananjai
You should wait for Coin Slider Wordpress plugin.

@Max
Put thumbnails as navigation buttons background.

@Sam
Just put title in b or strong tag.
css gallery
May 3, 2010

Nice transition effects. The transition effects a bit slower in IE8 and IE7 but thanks for sharing anyway
Sandra
May 3, 2010

I’m looking for a way to put a photo credit aligned on the right hand side but only under certain photos. Meaning, it might occur at the same time as a title, or it might appear with no title. If it has to be part of the title, I’m looking for at least the ability to style it differently than a title. (ie: smaller font, paler colour). Is this something that I’d have to add to the .js files? I have no idea how to modify these ones! Your help is sooo very appreciated!

Here’s a sample of one of the slideshows:
http://designeworks.com/rja/work_house3.html
You’ll notice that the photo credits appear under everything including the drawings, which is what I’m trying to avoid. Thanks so much!
Fletcher
May 4, 2010

Greatest plugin! =)

But once request – make a more normal image resizing, as here – http://rapidshare.com/files/383373473/timthumb.php.html
Jason
May 4, 2010

Thanks for the great plugin. I just have one question, how would I go about implementing code that allows the Title/description bar to appear only when you MouseOver the image, like it is for the navigation?
Jason
May 4, 2010

Nevermind, I figured it out. Would be awesome to get them to appear and disappear with a fade though.
Krzysztof
May 4, 2010

Hi!
Great plugin Ivan!
But I have question, how change the font size in the title and text field? and second question, whether it is possible to get the shadow effect under the slider?…what should I do? please help!

Thanx.
Regards.
Krzysztof.
Dave G
May 5, 2010

Where do i put this please?

$(document).ready(function() {
$(’#coin-slider’).coinslider();
});

Dave
Chadi
May 5, 2010

@Jason

could you tell us how you did the Title/description bar to appear only when you MouseOver the image.

thanks.
David
May 6, 2010

In my opinion, your plugin is one of the best image sliders there is. But with all the effect, why didn’t you include a simple “left to right scroll” effect?
I know, that’s not the purpose of this plugin but I like it simple
David
May 6, 2010

Ah, right, just spw and sph set to 1 does the trick.