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’
Great work !!!
Excelente script!!!
Saludos desde Mexicali, B.C., Mexico
How can i add more strips???
Sabrina, this slider doesn’t have zipper effect, you should use jqFancyTransitions for that.
Ben, I don’t see that images are chopped. If you want you can remove buttons below slider if you add this in your CSS:
.cs-buttons { display: none; }
or
#cs-buttons-ID_OF_SLIDER { display: none; }
Great slider! One thing I’ve not been able to figure out though is how to disable the navigation buttons below the slider. It’s chopping the bottom 10-or-so pixels off of my images, just like it is doing with the demo’s images.
Hellow,
This a very nice slider.. I have 2 questions.. Is it possible to get the transition from this one http://workshop.rs/projects/jqfancytransitions/ ( the zipper)
and how can i add more strips?
I had this one http://workshop.rs/projects/jqfancytransitions/ but i don’t know how to change the navigation numbers into a image..
and this one had it so i changed it :d
Tommy, you can achieve fading effect if you set spw and sph to 1.
Great work!!! thanks but please add also html file
hello!!!!!!
not found with
Description for img01
Nice slider. Anyway to make a Fading effect??
Thanks
Very useful thanks !
Maybe nextime a plugin for wordpress ?
Congratulations
Hello.
Thanks for you’re slider, I put it on my new website yesterday, and it was easy to use and adapt.
My only complain is there’s no play/pause button. Even if you can pause when the mouse is on an image, it could be good to have au play/pause button.
If you do this, coin slider will be the best slider ever.
Thanks a lot by the way !
Hi, Totally new to this and im sure ive done this wrong. Ive placed the <script….. (The 3 lines of it) just after my head tag.
Then, copied the rest where i want the pictures to be displayed on my html file:
……………. etc… Also placed the
$(document).ready(function() etc….. after them above…
In the same folder as my html file placed the java script files.. Now all i have is two links and two squares with red crosses in?
Please help what am i doing wrong? š
Im sure its just me being stupid.. lol please help..
Dave š
Jhon, can you tell me what you want to achieve with this code ?
@ivan
Hello
my code for thumb images
but it does not work…can you help me find the error..
Error displaying image
@Ivan
I’ve looked at some other sliders and it is hardly exclusive to your scripts. Most complex animations make use of backgrounds and so can generate those requests.
Hard to say if this is under-known issue or just considered necessary evil.
I am still undecided if I should live with it or go with simpler animation.
@Rarst
It’s interesting, I didn’t know that. I’ll have that on mind for my future work. Thanks for share.
Both plugins works on same principle and it will be hard to change that.
@Stephen
Shadow is background image of slider wrapper.
I don’t know how to center image, I think that it can’t be done, but if you find solution please share with us.
@Leo Balter
You must use id’s. I don’t know how many sliders you want on page that you need to select them by class name, but be careful multiple sliders can affect on transition smoothness.
Very easy to use. thanks
I tried to apply the plugin to other way selected objects and got a exception. Example: $(‘.coinSlider’) … This is only working if I direct the plugin to id’s selected objects.
Are you looking to solve this?
Hello
not planning to do so only with text based div
Nice slider! Like the compact install. Couple of questions;
(1) How did you achieve the image shadow in the demo?
(2) Any way to center the slider (image) – tried a few CSS things but no go.
Also, image sizing (or even image centering with no-repeat) would be a very nice extra feature. Keep up the good work!
@Ivan
I’ve asked around about requests. Best answer I got is that you change image as background URL and this can be interpreted by browser as new object that requires downloading. To have no requests one must manipulate objects, already present on page – hiding and showing them with display property for example.
By the way jqFancyTransitions also generates those requests, I assume it uses similar code.
Rarst, I’m not sure why that happen, I don’t have any additional request in plugin. Regarding changing of direction, just find this line in coin-slider.js
reverse[el.id] *= -1;
and change toreverse[el.id] = 1;
Ahhhh… sorry… i didn’t see that you have the option: “hoverPause: true // pause on hover” .Ignore my previous comment. This slide-show ROCKS man! Keep the good work, wish you the best!