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’
Hi too in Chrome 19.0.1084.46 very fast transition.
Hello from spain, coin-slider operated very fast in mozilla 12.0 sDelay the effect disappears quickly and does not transition between two photos.
Hi, Not working for me on WordPress 3.3.2..trying to figure this out..
I have installed and activated theme slider and selected coin slider as the slider type. I found some install instructions on wordpress.org saying to insert the PHP code snippet into a PHP template but which one and where exactly?
Also the CSS file coin-slider-styles.css referenced in the code snippet in your example doesn’t exist in the plugins folder structure. In cPanel file manager it reads like “wp-coin-slider.css.php” or am I missing something here?
Hi. It is not working. I wonder why…
Is there necessary to have installed any other programs?
Plus when I try to open jquery a message says “error 800A1391”. Is that normal?
Thank you
Great slider. I’ve used it a couple of times but now noticing something odd. if i float the slider div, any div to the right of the slider div is pushed to the next row and does not float.
Example:
I’ve looked through the coin-slider.js file and coin-slider-styles.css and nothing seems amiss.
Any ideas? Thanks again.
Thank you very much for this plugin. It’s great.
BB
I have problem too,
So hard to work…
Love what you have created but I’m having real problems getting it to work, any chance you could help out?
Thanks,
In the download link above the “jquery-1.4.2.js” was not included so you may have to download this also. In my case I have a more recent version “jquery-1.7.1.min.js” which is working fine with IE8
it’s not working on ie8.0…. any ideas ??
very nice plugin, thank you very much!
Hey, great plugin.
I don’t see where you are hosting this plugin’s source. I have a couple of bug fixes I’d like to send you. I would recommend putting this up as a github project if you haven’t already. Let me know.
Thanks,
Wes
Hello, this slider is very nice and powerful! For me works better than NIVO!
But i have one thing you should edit! There is not possible to change text of “PREV” and “NEXT” cs navigation buttons. I had to change it inside the jquery plug in, because the text is inside the code.
It will be much better if you will add it as parameter and we can change it when we call the slider in jquery.
Thanks!
how to center buttons ? i tried different function but nothing happens.
tnx !
Hello thanks for the great slider!
I have one question – is it possible to load content by ajax?
It works fine for me in Firefox, but in all IEs here is an javascript error: SCRIPT438: Object doesnt allow to use attribut or method “attr”.
coin-slider.min.js, line 27 letter 399.
BUT after press F12 in IE to see developer tools and refresh, it works! :0 it looks like the ajax content is not loaded before the slider wants to show it, but the first frame shows fine so the content have to be loaded.
Thanks
I want to have the image centered in a sidebar and so far haven’t been able to accomplish that. One solution may work in IE but not Chrome and another solution the reverse. I tried text-aligns, margin-left: 25%, divs with alignments, paragraph align, etc all with no success. Does anyone have a solid, workable solution for horizontal centering?
Hi!
I encountered a problem and was wondering if anybody can help me.
The thing is: I want coin slider to be horizontally centered.
if i put margin:0 auto in .coin-slider class then it works in chrome, but not in firefox. if i put it in a container div and center it, then it works in firefox, but is pushed down in chrome.
thank you
Hello
plz help me
plz can u tell me in details how to used that? beoz when i try its not working.
thanks
where do i add the javascript options code in my html doc?
thank you
Hello Ivan!!
I need eliminate a effects in the slideshow.. or add fade effect, help me please!
hi..
Amazing design..
But for me it’s not working as mentioned..
I like this slider so far, however when testing in different browser, it run too slow in IE 8.0. And with the photo transitions as they are, you can’t view the whole picture before is starts to change to the next one. I don’t want to change the speed as it’s perfect in all other browsers. What do you suggest to fix transition speed in IE 8.0. I dislike IE immensely; but 80% of our users have it. Can you help? http://www.fgclc.org is where I’m testing right know. Thanks!