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’
I’m really liking this slider but there’s one thing that bothers me. I can’t get background-image for prev and next buttons to work. I can set background-color in the css-file and it works as it should be working. But for some weird reason background image does not show up. I’m using the latest version downloaded here (version: 1.0 – (2010/04/04))
Could you help me out here? I’m quite good with CSS as I’m a professional web designer so I’m guessing it’s got something to do with the jQuery.
Svaka cast za plugin 🙂
Hi I am totally loving this slider, it is one if not the best slider around. I am having some problems implementing it though. The thing that is confusing me the most is that the navigation buttons (The little squares at the bottom) always just refresh the page instead of just going to the next or previous image. I don’t know much about jquery but if it is something that you could help with I would greatly appreciate it. Anyone who can help, would be great. Thanks.
😀
Is this works with jquery 1.3.2?
I agree with @Munim
It would be amazing if you could have a stop event which can be binded to a stop button.
Or even better, if you there would be an option to disable looping, i.e. the slideshow stops after the last image.
Has anyone else achieved this?
Hi .. I have edited your coin slide javascript file.. I have actually made want I want.. putting up the squares infront of the images…
Right now could anyone help me to have a fade in and fade out transition with this slider….
Guyz hope you could help me…. t_mask17@yahoo.com
Thanks in advanced
great Work!
Is it possible to put buttons on the left bottom corner (on top of the images) rather than below the images.
Could you help me doing this kind of coin slider…
I dont have any idea how to re-position the buttons.
Thanks in advanced
I am having a conflict between the coinSlider module and the superfish module, but only in Safari even though I have my jQuery turned off and conflict mode on in the superfish module. The coinSlider works great when I turn off the superfish module. But when its on, the coinSlider just displays all of the slide images stacked on top of each other. any help would be appreciated.
-Thanks
Great plugin!
Much better than nivo 🙂
One question. How can I give a delay to my text?
Thanks,
Hey,
Great job!
Can I change the navigation boxes (below the slider) to images? I tried changing to background: url(…); in the css, which worked. But it wouldn’t change the picture for the active one (the image stayed the same all the time).
Thanks,
Joakim
Nice stuff! But is it possible to make playing this slideshow from random slide or image, at first time? How to make it?
It would be amazing if you could have a stop event which can be binded to a stop button.
Or even better, if you there would be an option to disable looping, i.e. the slideshow stops after the last image.
Has anyone else achieved this?
very nice work. Really like it.
One question though, don’t know if anyone else has noted this, but I had left the main preview page open on my browser for about a day & I noticed that the transition effects had stopped. The images did switch, but minus the effects.
FP
Thanks a bunch! This is one of the best image slider in the entire web not only because of it’s transitions also because it’s compatible with IE6.. I’ll implement it with blogger soon.
You should put a donate button my friend.
Sorry, I flicked though your code that you have used for the demo and found that you have a container which has the background image and then the slider inside it. Sorry for the double post.
Last point; please add a Paypal donate button to your page, I haven’t been able to find one and you deserve it, I’ll check back in a few days.
My thanks,
Miles
This has got to be one of the best js utils I have ever used. One question about it; how would I get an image under the main rotator and above the square navigation?
Thanks in advance,
Miles
thank you for the great Plugin! I love it!
But, I would like to use numbered text navigation instead of squares.
How can I replace the square navigation to Numbered text navigation?
If it is possible, Could you let me know?
Thanks!
awesome,, but still confusing to aply that on my front page of my blog 😛
hello. this is nice and i would like to implement it in a magento website but do not know exactly how to do it. any sugestions are welcomed. thanks