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’
OK, never mind, I figured it out. You have to enclose the desired effect in apostrophe marks. With that done, everything runs perfectly. Awesome slider, thanks!
OK, I’ve been able to get the coin-slider to run perfectly (very nice work, by the way!), with only one problem: the “effect” option, when implemented, causes the slideshow to shut down. If I don’t specify an effect, leaving it at random, then it runs fine. But it doesn’t seem to accept an “effect” parameter.
The original size of the images is 644 x 415. As I had changed it to 900 x 415 but the effects only work until 644 width and blocking partial of the rest image on the right side. Can you check for me? Thank you in advance.
Hello,
We have different size of images and we’d like Coin Slider not to repeat the images, Which line should i modify please ?
Thanks š
How can i make text background black and align right ,it does not work in my site … sorry for bad english š
Nice slider and it works beautiful, but l wonder where how l can change the position to center of my page?
Can be snow falling plugin be added to coin slider ?
Hi It’s works fine how to change the image size? I know you can change the pannel width and height
Nice script. I have it working well on my SharePoint site using an Form web part to load the startup scripts. My issues is the images appear left aligned in the webpart. Is there a parameter/option to align the image to center?
Can’t make it work and can’t figure out why – see http://www.2collectcola.com/testc.html
I just get a list of images with captions no js works?
me podrian ayudar descargue la carpeta pero los codigos que tengo q hacer en el html me dificultan las acciones tengo errores
I have implemented the coin-slider on this site…
http://www.katiedykstra.com and it sits on the first image twice as long as the other images. What can I do to fix/remove this issue?
The script is quite good with all the functionality. The only problem is the high CPU-Load (up to 90 % with Dual Core) with higher … spw/sph-values (e.g spw:1; sph:80). But especially that effects would be very nice.
ya really it’s a great js. it works properly. nice. thanks.
@chintan shah
The script works fine. May be you did not start the function:
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 900, navigation: false, delay: 5000 });
});
However, if you really want help you should post a link to your page. It can be anything and guessing will noch be very effective.
Hi,
after inserting the code as told still the jquery dont works. can n e one can help me out.
—
thanks
chintan shah
Hi,
i m trying to insert the code as per the guidelines but still m not able to active the slider means the slider is not moving what to do?
pls reply asap on this.
—
thanks
chintan shah
How do I get normal slide left or slide right effect ?
Thanks Ivan, great, great script.
To use in WordPress:
https://github.com/mmfilesi/wp-coin-slider
Thanks!
Hi, is it possible to use the image slider without the LINKS? (e.g. a) and just use it with linkless images?
Is it possible i load a SWF file instead of a image file?
When I use this :
$(“#coin-slider”).coinslider({width: 300, spw: 1, sph: 1});
The title area with text does not change size. Also I assumed setting spw & sph to 1 would mean the images do not tile ? This does not seem to be the case.
Nice script though š
Can you please add ( fade Effect ) because this is the only piece of jquery slider that is really compatible with that stupid I.E really it works with 7 8 9 all the version. Please if you can add (fade) effect so it would be very nice.