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’
Hola, como puedo cambiar el next y prev por mis propias palabras?
Very good slider!!!
But how can I resize the images? Is there any possibility for doing that?
Thank you
“hoverPause: false” does not work!
this is really nice and clean, well done.
Is there a way to use this by getting images saved as blob in a mysql database
How about images as URLs? I didn’t find out how it works. Any help? 😉
Nevermind, i fixed it. I was loading 2 times my jquery (one time in head and one time in body, before the coin slider script). I don’t understand why it worked in local but whatever, it works perfectly now. Thanks for this awesome tool.
Hi, nice jQuery image slider. Seems easy to implement.
But i have a problem, it works fine in local, but when i host it on my website (exactly same files/folders), it doesn’t work.
The error message in my console is :
TypeError: $(…).coinslider is not a function
Does someone have an idea of what i’m supposed to do ? Is it a server configuration problem (my website is host by 1and1) ?
Thanks for creating this!
I am wondering why i am not able to add border to the right side?
And the editing of the width and height of the image does not seem to comply once it is put into the panel of the slider.
Does anyone know why?
Dint work for me 🙁
“hoverPause: false” does not work!
Hi there, thx for sharing… it is nice and easy to implement… but I have a question…
can i set width: ‘100%’? I try putting this setting and the effect on the slides show is not working anymore.
this slider is best slider and easy implementation!!
very nice post it work immediatly thank you
nice post … important addition for my blog
Is there a way to account for landscape/portrait mixed images? Pics either get truncated or repeated when not set to the same size.
Awesome gallery. Simple and easy to use, with nice transitions, finally something useful.
Good job!
it doesn’t work for me in internet explorer 9, 10.
Do you have a solution? Thank you
Sorry guys for my previous comment, the absolute value does positioning the slider at where you paste the code. to fix the problem regarding the small squares go to file (coin-slider.js) and in line number 287 change the value from 50% to 20% it should be good.
tq
I tried to implement the tool, but it is not so easy. I can not, the script does not work.
Thanks gusy for this very usefull slider..it helped me out alot..
For those who wants to change the position of the slider so it would be excat in one squer..do this
1) open “coin-slider-styles.css”
2) In line ‘7’ change this from [ position: relative;] to [position:absolute;]
thats it simple.
thanks once again developer.
I did manage to put this slide on my website, but I could not positionate the squares. They went too far from the slider itself and I could not make them go back any pixel. Could you help me with that please?
it is not working online ?? !! just locally that is strange !!
How can I move the dots around? I’ve tried via the CSS and the js file but for some reason it’s not working. What do I need to edit?
its not working wat could b tha problem??? 🙁