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’
Hi Ivan. Your slider is awesome, but i have one question. How i could add buttons on description’s background, cuz then i adding, its goes under description’s background.
Thanks for any help, and sorry for my bad english.
Hi thanks for this awesome slider, for all of you who has problems on the width and height issues, just make it in order from left to right, so it will work 🙂
The order is on the list of option
Example:
$(‘#coin-slider’).coinslider({ width: 600, height: 300, navigation: false });
Hope this little information will help =)
Thank you
Hi this is awesome, for all of you who has problems on the width and height issues, just make it in order from left to right, so it will work 🙂
The order is on the list of option
Example:
$(‘#coin-slider’).coinslider({ width: 600, height: 300, navigation: false });
Hope this little information will help =)
Thank you
I really like this slider and will be using it in my new web site redesign. I do have one question, is there any way I can change the bottom navigation to circle like you have it on your demo page? Thanks
Really nice and simple !!!!
Hi Ivan
I really like this slider and using it in my new project.
However, is there any way I can change the bottom navigation to circle and increase the size as well?
Many Thanks
Hello Ivan,
I have recently been working on a wordpress theme with your slider built into it. For some reason it has stopped working and I cannot get it working again. I have tried everything in my power to fix it, but I am not a coder, so it is difficult for me. Do you have any ideas on what I can do to get it working? The slider is on the home page at split7.net.
Thanks,
Ian
Hi, Ivan! Your slider is great!! But i found a little bug – when you quickly click on navigation buttons, speed of transitions increase and don’t slow down until you refresh the page. How can i fix it?
Thanks)
I´ve developed some wordpress themes with your useful image slider. Let your wordpress users look for WorkTheme or Pho2 v.4 to know more about.
http://www.fcsites.com/themes-templates/
Great job!
Will this work with FrontPage 2003?
Hi,
I have tried this plugin in my website,, and its working like charm..
thanks for giving such good plugin.
I am having one issue here… I want to use this plugin for multiple times at same page, Its not working properly.
Could you please give me suggestion to solve this.
Thanks
Hi Ivan, There is a method to scroll the images from top to botton during the transition? if so, could you explain how to do? thanks
how to add loading script
I thought I’d try to save some people from wasting the amount of time I just did: you can’t specify width and height in CSS units, only as a plain integer in pixels. Not doing so leads to some very interesting problems, but now that I’ve discovered that, everything is working very well.
This is great!
Very simple to set up and install.
The only question i have: where can i change the buttons to rounded and the color, like in the demo page?
hello, you slider is genial, thanx for share it
regards form Argentina
I love this slider, i’m just wondering, is there any way I can turn those slider’s corners to rounded?
It’ll be a great help for me.
Thanks.
How do we install this script. Where does the other code go? header?…. The directions here are horrible.
can someone make a video?
To resize the images to a fixed size can be done with a php script to photos.
This doesn’t work. I get the following issues:
1) Hover causes the prev / next to disappear
2) Wrong captions displayed with images
3) Links around images don’t work anymore
4) Images repeat with no way to disable or set a background color to match the image.
Useless! Is there an image slider which actually works?