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.

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.
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 ]
Leave a Reply
Trackbacks and pingbacks
click to expand
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Demo Download [...]
-
[...] Download Demo [...]

February 2, 2012
Hi! Thank you for this cool slider.
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?
February 2, 2012
This is a really nice plugin, nice and light weight. Thanks for sharing.
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!
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!
February 2, 2012
Oop, just kidding, I figured it out. Thanks again for the script, and sorry for the spammy question!
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.
February 3, 2012
Thank you for this awesome script. Kudos.
February 3, 2012
Hi! Thank you for this cool slider.
February 3, 2012
How i can move description block
February 3, 2012
found it, sorry
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?
February 3, 2012
Is it possible to make coinslider show in all pages of my website and not only on my default page?