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’
Thanks for making that great plugin.
I have a small request for the next version.
Currently if you mouse over a slide the Slide-show don’t stop. So if you are interested in one slide you cant see it because it will keep changing. So:
On mouse over – Slide-show pause,
On mouse out – Slide-show start!
Thank you! I hope you fix this annoying bug in next version.
@Ivan
Any chance direction thing will get into some next version? 🙂 Sadly I suck at JS.
I was wrong about every change, seems more rare – but additional requests do get created. Here is Apache log from my local stack with page with slider just sitting open http://dropbox.rarst.net/coin-slider-apache-log.txt
@Rarst
It’s possible to force single direction but for that you must change source code. There is no new image request for every change. Images are loaded just once.
@Ram
There was mistake on documentation. It should stay:
$(document).ready(function() {
$(’#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});
@Ram
I also met this problem.
you just can’t use $(document).load() here.
use $(’#coin-slider’).coinslider() directly. it works.
Sorry is this one.
”
$(document).load(function() {
$(‘#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});
$(document).load(function() {
$(‘#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});
“
I dont know what I’m missing but it isnt work. This is my basic codec. thanks for to share this perfects things.
$(document).load(function() {
$(‘#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});
$(document).load(function() {
$(‘#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});
Great contribution for web world. Amazing stuff for web designer to compete against flash animation. Expecting more gimmicks for you guys in future.
Thanks a Lot…!
The jquery-1.4.2.js file is not in the download folder…
And one more thing I noticed – looking at network tab in Firebug slider seems to generate GET request for image on every change.
Why does it need that? It can easily flood server with requests as I understand.
Very solid and interesting slider, almost exactly what I wanted for new theme and I am testing how it fits now. Thank you!
Two questions:
1. Is it possible to force single animation direction? For example make it always go from left to right, instead of alternating directions between slides?
2. Why aren’t captions linked?
Hi,
A nice slider, I like it very much. But this slider works very slowly in my IE browser. I dont know whether others are also have this problem.
Ovo je odlicno..odlicni efekti.. Bilo bi jako dobro ako bi mogao od njih da napravis plugin..kao dodatak za easing ili tako nesto slicno.. To bi bilo savrseno!
Poz i keep up with the good work.
Thanks for comments guys, I’m glad that you like it : )
Raoni, this plugin doesn’t have option for that, but I’ll probably add that in future. For now I can offer you next solution. Below coinslider() call add those lines of code :
$('.cs-prev').html('text for prev');
$('.cs-next').html('text for next');
Looking forward to the WordPress version of this, it looks great!
I can not thank you enough, i have been looking for something like that for weeks. Thank you so much!!!
Hi!
Great work!!!
How/Where can I translate the navigation (next/prev)???
Thanks very much!
Chris, slider will pause when you put mouse over the image. You can disable that with set hoverPause:false.
Thanks so much for releasing this … it’s so very nice.
My only complaint is that there’s no ‘pause’ button or action.
Other than that, it’s perfect!
I wish these plugin came with a preload image setting ( limit the number of images called from the server). These plugins are great, but all the photos can’t be seen at one time, so why should I need to load them all. This kills mobile and low bandwidth development.
Add this functionality and I would use this on all the sites I build.
Benvie, thanks for sharing that url. I didn’t know for Uize before, those effects are really great. I’ll have hard time if I try to re-create them in jQuery : )
@USER
You can’t set background image to no-repeat or enlarge image automatically with Coin Slider. You must enlarge image before use.
Hello,
Thank you for creating this awesome slider plugin!
Could you adivese how to set background-image url no-repeat?
or how to enlarge the image to fill in 100% width and height.
Thank you!
It looks like your two plugins are accomplishing similar things to the image wipe widget for the Uize javacript library. I was thinking about trying to port the Uize code over to jQuery since I do all my work with it, but it seems like you’ve done most of the work already. You can see the widget in action here:
http://www.uize.com/examples/image-wipe.html
Might give you some more ideas too.
Tony, you should change .cs-prev and .cs-next classes, just remove text and background color and put arrows as background images.
hi, awesome slider, man, what about is i want to use arrows for ‘next’ and ‘prev’,?
Fantastic, have been looking for new transitions within JQuery framework and this is the perfect antidote.