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’
it’s awesome.i like this and thank u.
Hi and thank You!
My JQuery/Javascript skills are almost non existing so please help me on this.
I honestly ran ALL comment pages trough and couldn’t find clear solution, how to make the image buttons (below the slider), show small thumbs of the original image?
I guess, I could make additional smaller picture files for thumbs, but how to modify JS correctly, that the image buttons (thumbs) seen, would relate to bigger picture, shown in slider?
“Diego Crusius” has suggested (on compage 46: http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/comment-page-46/#comments), that adding some additional code to “coin-slider.js” (around line 268) cs.buttons > “a” details, that would do the trick – but I kind of failed in it – maybe did something wrong.
Unfortunately I couldnt make the “small thumbs” visible (checked the path, filenames, locations and tested also placing the images to root folder).
Although Diego had nearest solution for my problem, I guess it still wouldnt give me outcome, where JS could read and automatically place the smaller “thumbs” (related to current picture on slider) under the slider?
Sorry for possible grammars and the length of the comment.
Hope I was clear enough and thank You all for any kind of help with this.
Is it possible to add a new effect like slide effect (left to right)?
how to do that?
I know with another script, but I need to add the slide effect in this script… Thanks
Hi! Thanks for the cool slider! I am currently updating my page and put it on, but I got a problem:
It shows more buttons than i got slides. I got 8 slides and it shows 16 buttons.
I have the code just like you show: 8 tags and inside of them the and the
Hope you can help me 🙂 !
How can I make the effect “fade” instead of using the other transitions?
Thanks in advance.
Hi, great job.
I want to set the height and width of the slider at 100% of my div …
is it possible for exemple to do :
$(’#coin-slider’).coinslider({ width: 100%, height : 100% });
thanks
Had slider working with old Magento go theme. Currently changed to Formal Theme…which is better for my store layout, however, the slider no longer works but breaks my site. Anything I should know, versions, etc, to get it working with my theme.
Thanks
Great job!!
not displayed on tablet (nexus), how could I?
thanks
Hi, Thanks for wonderful slider.
I want to use it for my website, but there’s a problem.
How can I make the slider with full images?
I mean, auto fit of images to the screen size by jquery adjustment.
Thanks again.
Hi, great job.
I want to set the height and width of the slider at 100% of my div …
is it possible for exemple to do :
$(‘#coin-slider’).coinslider({ width: 100%, height : 100% });
thanks
Thanks for this slider, its great.
I see only one problem – when slider loads it works fine, but if it runs longer images are changing quicker (exactly not images but sides betwen images- squares are berly visable)
U can see it on the demo page to…
I can’t seem to find a way to change the previous and back button font color to white, it keeps staying at the default underlined blue. I imagine the setting is in the CSS but I’m not able to pinpoint where. Nothing I do seems to change anything. Any assistance would be appreciated. Thank you.
Thank you very much for this slider, it’s great!
i’m having just one issue: when i put over a certain amount of images, the little navigation squares at the bottom mess up and only a fraction of them is shown, since the rest overflows from the slider.
is there a way to hide them completely or make so that they organize in several rows?
thanks in advance
man, i can the image take all page.. and the slider sperate and show 2 pictures.. have solution for this ?
nice stuff. Its too hard for me and I copied it from my other website (www.sklepowe.info) but I still have some error. Do someone know how to fix it? (www.suknie.it) right side column
Before the slider fully loads, it is displaying all of the images vertically. I have checked the coin-slider-styles.css and it does have the line “overflow: hidden” and “position:relative”. Has anyone found a fix for this issue?
Thanks!
Thanks! nice slider!
How do I get the image text to sync with the images?
Fix repeating images:
Your original image size must at least be as big as the size you use. In other words, if you want your images to be 900px make sure that your image is 900px and not lower 900px or the image will repeat.
Title Bar size:
You can also adjust the title in the css. I set mine to 100%.
I also changed the coin-slider.js by added a width:100%; to the title section’s style: The title section has comments: “// create title bar”
I hope this helps.
“Giving back after taking so much”
Mike
Looking at previous comments. I’m facing the same problem. I can’t find a way to make the image no-repeat. I hope you will include this on the next version of your slider that small images don’t repeat and it would be better that the image will auto fit because small part only of the image can be seen when you upload large images. thanks. hopefully you could resolve this soon. T_T