Coin Slider: Image Slider with Unique Effects

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 Source codefork me on GitHub

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’

jqBarGraph – jQuery graph plugin (157)
jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your […]
Create image gallery in 4 lines of jQuery (146)
Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image […]
mooBarGraph: AJAX graph for MooTools (18)
mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all […]
HTML5/CSS3 Circle Music Player (3)
More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we […]
Image gallery with fancy transitions effects (1034)
I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition […]

1,638 comments on "Coin Slider: Image Slider with Unique Effects"

I question, i have 4 panels and im trying to put them side by side, ive played with the width in css and tried listing it. Would anyone happen to know the solution?

Fernando B on January 30, 2013 at 7:45 am

hi all,

i have used this control overall nice control but i have an issue with this i have increased the height of the control for my requirement but after increasing the height images are getting repeated .I have tried a lot of things like background-image:no-repeat but no success ….

any Suggestions

Umair on January 28, 2013 at 5:07 am

@Martin & Ryan – I had the same problem but solved it like this:

I had dumped the .js and .css files in the same folder but Dreamweaver wasn’t ‘seeing’ them for some reason I can’t explain. To solve it, I dragged the files directly into the code. It looks exactly the same, but it now works beautifully.

Andy Higgins on January 28, 2013 at 2:38 am

Thanks for posting this, it sounds great. I think I am having the same problem as Martin on Jan 12. My images just appear in order with hyperlinks next to them, no slider…I have jQuery and Coin-Slider downloaded, and made the includes in my web page like this:

Then I literally copied and pasted your slider content and blocks above, inserting my own images and descriptions of course, so as not to mess them up. Am I forgetting something?

Thanks again,
Ryan

Ryan on January 25, 2013 at 11:51 am

@Martin: this sounds like a stylesheet issue. Make sure you give the correct path, e.g.

Katja on January 24, 2013 at 2:03 pm

Nice image slider – I do have a little problem though… when the page is first loaded, the images are perfectly aligned at the top. Thereafter, all images appear some 10-20px below the top margin, showing the image behind. Is there a way to fix this?
Thanks

DG on January 24, 2013 at 12:07 pm

Thanks for the coin slider. I love how clean it looks. I’m new to Javascript and I have a quick and hopefully easy question.

I have the width set to 680 and height set 320. Some of my pictures are smaller than that size. How do I prevent the images from doubling?

Chris on January 23, 2013 at 8:42 pm

Me funciona la galería, pero no puedo modificar el tamaño ni la posición, ¿cómo lo hago? es URGENTE!! GRACIAS!

Magdalena on January 20, 2013 at 2:42 pm

Very Nice Slider

medo on January 20, 2013 at 9:50 am

Hi, im new to JQuery, the code don’t work in my test, plese help-me.

Erick on January 17, 2013 at 12:32 pm

Hello,

At first: Awesome work!!! Ill use your slider on my website.. but I have a problem: it works everything fine, but the transition effects dont “fade” like yours. They do it like “static” – only build up.. but dont “fade” into the other picture like in your demo… and I love the fade effect.. can u explain me, what happend?

Argu on January 13, 2013 at 11:20 am

Hey, it’s a very cool imageslider! I’m new to jQuery as well and my coin-slider dosen’t work at all, although I’ve been through the whole guide..
My problem is that every one of my images is just shown on the webpage with the “description” standing next to it.

How can i fix this problem? I figured that i don’t need to change anything in the CSS or jQuery. but what am i doing wrong?

I’ve linked to the CSS and jQuery in the head-tag and I’ve done the same thing with:

$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 900, navigation: false, delay: 5000 });
});

Hope you can help.

Martin on January 12, 2013 at 9:22 am

i like it

abhi on January 12, 2013 at 12:17 am

i want slide effect of coin slider is only slide left to right..!!!

sanjay on January 11, 2013 at 3:16 am

for using 2 sliders on the same page try this :
$(document).ready(function() {

$(‘#fist_coin_slider’).coinslider();
$(‘#second_coin_slider’).coinslider();

});

Svetlin on January 9, 2013 at 8:13 am

Hi, thanks for this slider, i really like it!

I am still a beginner with website editing and i don’t know much about javascript.

How can i insert multiple sliders in the same page?

Federico on January 7, 2013 at 8:20 pm

It doesn’t work in IE ( 9 ) . 🙁

dan on January 6, 2013 at 5:13 pm

Thanks for this great slider!
But I’m having a little problem here.

I’ve put the slider into my code and uploaded to a server for testing, (http://taiyoworks.web.fc2.com/2/) but the second image goes below another image (as in y-index) for about a split second, and then goes back to what it should look like.

I don’t know if it’s the server’s problem or I did something wrong with my code. I’ve tested with Chrome 23, Firefox, and IE9 but all of them have the same result. When I tested locally, there was no problem at all.

Hope someone can help me out!

Taiyo on January 6, 2013 at 7:50 am

Million thanks mate.Great job.I am trying to use it on my website it is running. But, I could not figure out how to show the image so that it fills the whole slider.Now it only fills half of it. the Html and the CSS does not match properly either. But its working!!!Below are codes I’m trying at this moment

HTML:

Mini Ninjas
Your quest to defeat the Evil Samurai Warlord has begun. Control the powers of nature, possess creatures, use your
furious Ninja skills to free your Ninja friends.

Jquery Plugin call:

$(document).ready(function () {

$(‘#coin-slider’).coinslider({ width: 900 });

});

CSS:

.coin-slider { overflow: hidden; zoom: 1; position: relative; width: 100%;
margin-left: auto; margin-right: auto; background-color:black;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: 100%; padding: 10px; background-color: #000000; color: #FFFFFF; }

.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

Links:

From the above you can see that the CSS has some other HTML classes (i.e .cs) which I don’t have on my HTML.
I am just trying to show the image in the slider so that it fills the whole slider , not the half.

Could you please direct me what I am doing wrong and how to solve this and also if I want to show picture instead of PREV and NEXT for the navigation what I should do.

Mate thanks very much for your time . you are a legend.