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 Ivan for the great image slider.
But when i run it on IE the transition is very slow and the CPU is 100% processing.
But every thing is OK when using FireFox and Chronome
i put coding at my index page
on the tag and coding
$(document).ready(function(){$(‘#coin-slider’).coinslider({width:501,height:250,navigation:true, opacity:0.5, delay:5000});}); on the tag, then my web page layout gone crazy. why that happen. how to fix it. really need your advise. need help.
Hello!
Found one bug – in margin calculation. “Cs-buttons” appeared not centered.
Here is my solution:
$(“#cs-buttons-“+el.id).css({
‘left’: ‘50%’,
‘margin-left’: -(images[el.id].length*17+20)/2,
‘position’: ‘relative’
});
Hey great plugin, but is there any way to use the effects without the slideshow. basically what I want to do is just run the animation when somebody click on a element.
Thank you
Great script…only issue I have is with ie6. Transitions drag…anyone else experiencing similar issues and if so, any work-arounds?
Hey all,
did someone check the slider in ie. It works really slow and needs many resources from cpu. Any Fixes for that problem?
Thank you very much.. very good tutorial and work..:)
great work but it is not work in any browser so please help me i can use this effect in my personal work. please replay asap.
The best easiest jquery slider around, and I tried them all. Thanks Guys
As you can see on my site http://www.computerfields.com
I put NAV images and active image , did some small changes in js as well but i am unable to remove NEXT and PREV text so i just replaced it with an `.
Can you please help me remove those text?
Thank you in Advance!
Great work, thanx
Is there a possibility to stop the animation after one run?
Hi,
how can I show always the navigation (prev, next) without hiding it?
@wabasaba
You can change navigation boxes with CSS.
@Sandra
Try with
#coin-slider img { display: block; }
@Greg
This slider don’t have that feature.
Fist off i love this slider. Used it multiple times on projects. I do have a question though. Is there anyway to stop the slideshow from repeating at the end and pause on the last image?
Thanks!
Greg
I’m using your fantastic script again for a new site design. This time the client wants to be sure that the first image (or maybe all of them) will print out if a user prints any of the gallery pages.
How can I make this happen? I’ve got a css file just for print and almost everything else is working out alright (except for layout!), I really can’t get the image(s) to appear.
Any suggestions?
http://www.designcs.ca/testing/v6/p-workplace.html
Thanks in advance!
Anyone else having a problem getting the first image to load in all of the IE’s?
It does work quite well. Installation is very easy.
thank.
How to make the navigation boxes to circles ? like whats on apple’s website: http://www.apple.com/iphone/
I tried to add background image of circle to .cs-buttons a, and another background image of circle to .cs-active, but the button image won’t change when the slide changes.
please help me out,
thank you and really great work by the way.
I’m glad to be able to help you. 🙂
I modified the css to not show the numbers, and that with your .min.js looks a lot better now, thank you! 😀
Ingo, I really appreciate your help, but unfortunately, it’s not working, I have no idea why…I still see the line of squares and big numbers underneath 🙁