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’
January 20, 2012
If you visit my website @ http://www.thoomdesign.com, you’ll see how perfect it works. My special thanks to the author Ivan Lazarevic, witch i mengent in the credits @ http://credits.thoomdesign.com
The site is in dutch, so probably not very ‘readable’ for most, but the site is about my company where i’m CEO and graphic designer.
Again, thanks to Ivan Lazarevic!
January 20, 2012
For some reason my images are not displaying but the coin slider module is. Images are correctly linked, common error? What could be the cause of this?
January 21, 2012
this script does not work with Internet Explorer 7. Any ideas why??
January 25, 2012
Looked very promising but I failed to install it inspite of all the explanations. PLEASE consider people who have very small knowledge of coding – reading suggestions like “At the end all you have to do is to call Coin Slider:
1
2 $(document).ready(function() {
3 $(’#coin-slider’).coinslider();
4 });
5
Call? Where? Where do I have to copy that piece of code to? Between HEAD tags in my html? Or in the HTML body? Tried both. Failed. Doesn’t work for me.
January 26, 2012
put it after body tag
January 26, 2012
i have use this script for this site http://www.stefanoranno.it/sito_1024/ i want the color of text is this #2A4574 is equal of the title and background #FFFFFF but the color i look is not that i want someone is possible help me???
sorry for my english
January 26, 2012
errata corrige i have find e option opacity and correct
someome please help me for the button??? i want use the image on left of the slide????
January 26, 2012
Thank you, I love this slider
January 27, 2012
Great job !!!
One question though :
How can I center the bullets under the slider automatically ?
The number of slides varies, so that’s why I would like to have the bullets center automatically underneath the slider.
Can this be done ?
Thanks for you reply !
January 28, 2012
Great gallery, thanks for sharing.
Note that jQuery file is not included in the package. You must download the jquery and link it in the head section of your page.
As for this part :
$(document).ready(function() {
$(’#coin-slider’).coinslider({ hoverPause: false });
});
Put this just before the and you are good to go.
January 28, 2012
As for this part :
$(document).ready(function() {
$(’#coin-slider’).coinslider({ hoverPause: false });
});
Put this just before the closing of the body tag ( ) and you are good to go.
January 28, 2012
This is great. One question – is there anyway to just do a fade transition? Or is this limited to only the four options listed in the instructions?
January 29, 2012
some one please help me?!?!??!?!?!?!?!
XD
January 29, 2012
The coin slider is fantastic. I am however having problem with my first slide. I have 5 slides or images. The first slide does not load or display. Though the text does but stays on the last or 5th image instead of the first. Each time I launch to preview the coin slider, only the text and buttons are displayed but when it jumps to the second image, the slider shines in all its glory. So it’s just the first slide I am having a problem. Help will be gratefully received.
January 30, 2012
Hello,
the slider is great!!
It works perfectly in IE, Safari, Mozzila and Chrome, but in Opera it does`t work so well.
Check it http://tri.site90.net/, I tryed everything but stil don`t work like it should.
Please, can you help me!
Thanks in advance
January 30, 2012
Thanks for the slider! But I have a big question? Can video be added to the slides? Or is it only photos?
January 31, 2012
Hello again,
I solved my problem and I like to share it, maybe will help someone
.
The problem was that the slider was displaying correctly but without images.
I chanched the quote marks of the images from to and I putted the images from the slider in a separate folder in my site, not in the folder of coin slider.
Now it is perfect, thanks a lot to the author Ivan Lazarevic!
January 31, 2012
once again I changed the quote marks of the images from ” to ‘
January 31, 2012
Big thanks for the slider!!
How can we fit on larger images? It only shows the top-left corner.
Thanks a lot
February 1, 2012
AWESOME slider! I got it to work well but I’m new to this stuff and don’t know how to format the text at all. I’d like to have a big title and then a line below with a description. Could anyone help?