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’
thank you it is very useful for me but i have problem with width of title box.plz help me
how can i make this just fade and not use cubes…i tried making them 1 by 1 but it still does the cube thing…
Tanks, I f you give me to scope free plugins .
Golam Hasnaine
Nice and light plug-in. Thanks for it.
However I see strange behaviour.
If my image width is considerably lesser than the slider’s width, the image gets repeated.
Here is my setting
Slider width – 565px
image width – 390px
Can this be avoided?
I’ve implemented this on several clients sites. Works great, but there is one strange thing that seems to keep happening. It’s not really a deal breaker but I figured I would post it here in case there is a fix/explanation for it.
The slider transitions seem to speed up if you leave the page open for an extended period of time. I’m not sure exactly how long it is until it’s noticeable, as I’ve just come back to windows I’ve left open and noticed it.
Basically, you cannot see the squares fade in and out after a while, it’s just instant. Maybe the times are stacking on each other after cycling through all images? Is this a know issue or is there a fix?
Thanks!
Gracias desde Argentina, muy bueno tu slide! saludossss
nice work…i want to know how to change slider prev & next button..how to replace it image..i need your help immediately…
tnx
….
Thank you. Excellent instructions. Great product.
What if an image is larger of the intended size? It seems that it is cropped … Can the image be resized to the slider intended size (i.e 565 x 256 )?
is it touchable? shall i use it with ipad/iphone?
Mete Han just delete span tag in the content
how can I disable title option
Hi, how can i implement a custom startsequence? I mean that the images start randomly.
Does anyone have a list of transitions they can email me? wraine13@yahoo.com.
This slider is fantastic. I have used Nivo in the past, but this is much easier to use.
really nice plugin, nicely done. clean code, easy to understand.
bit of feedback:
from me: don’t pollute jQuery namespace, use an internal variable to store methods. this protects your functionality from external overrides, and prevents you from unwittingly changing the behaviour of jquery. e.g. what if jquery added their own $.effect function.
from our users: pause was quite a sticking point, we’ve added pause on click, pause on navigate etc. this requires a pause function that clears the interval instead of a pause variable, otherwise the nav will stop working. it also requires modding the hoverPause behaviour slightly so the slider doesn’t unpause on mouseout. this worked better for us.
still the best slider plugin i’ve used to date.
hi
i really like to know how to install this module
everyone says it’s easy but i got confused.
please help me i need explaination step by step
thanks
you the man.
tommy
Great looking slider!
Question: How compatible the version available for download is with WP 3.4.x ?
When found on WordPress, the following warning is issued:
This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
see: http://wordpress.org/extend/plugins/coin-slider-4-wp/
Any thoughts of issuing an updated version that would be declared ‘safe’ with current and future WP releases?
Many Thanks!
JF