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 slider!
How i can resize my image inside #coin-slider to 100% of its width? When image is smaller then #coin-slider’s width, it dublicate image’s parts, but i need resize.
Regards.
If I choose to have just one image with a title, the image still seems to “cycle”. Now, without a title everything’s alright but with one the title is being reloaded as well creating an annoying title flickering.
@Koustav open your coin slider css file and edit the .cs-title selector and set a 100% width.
.cs-title { width: 100%; padding: 10px; background-color: #000000; color: #FFFFFF; }
I am having a problem with this coin-slider. How can I make it fluid full width that goes with any screen resolution? Please help me.
– Thank you
I am having trouble with the title overlay. It comes up several seconds after the image pops up on the screen. Seems to be the same amount of time that each image takes to slide. I have checked the code against the demo but cannot find any difference. Do you have any idea?
How can I display boxes, which are derived style #cs-buttons-games
On this page http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/ see “Add slider content and create one div with an id and put images and image descriptions, similar to:” this is not present. Thank you.
thanx 😀
The transition speeds up and goes faster and faster as time sits.
Any idea why, or what can stop it?
Hallo, nice slider but how can i fit picture to slider size?
Im trying to use this script on a website I have hosted on godaddy, using quick shopping cart. I got it working. However, it seems like it has to load each pic before its shown, everytime it changes. there is a white background between the images… How can I fix this?
If I wanted to have a youtube video as one thing I the side could I do that. I dont think I can do you know anything that would ?
I already fixed, but i have 1 question, there is a way to move the coins? maybe inside the picture
Im doing something wrong i think, the images looks 1 below another, i already install the Jquery 1.4.2 and follow the steps 1 by 1. Some Help?
in regard to the previous post the html rendered the code
” This is a Hyperlink “
Hi I really like this plugin its very quick and the load times are much faster that the other plugins out there
I just wanted to know how to add a hyperlink in the span tag for a caption in the image slider. I tried something like
This is a Hyperlink
But it does not work? any ideas?
Solved, Andreas over at stackoverflow nailed it… had a misplaced bracket.
OK… having a real issue with “Uncaught TypeError: Object #coin-slider has no method ‘coinslider'”
I have very little experience with JQuery, so it is probably me just being a newbie… I’m ok with that.
Code can currently be reviewed at techbuildersgroup.com/Sirah/
Code will be there at least until I get the issues resolved.
===========================================
From another site (stackoverflow), someone else asked the same question, and apparently resolved it… their issue was (besides some syntactic errors) that for reasons of loading priority, and due to not properly wrapping the instantiation call, the slider was being called before it was defined.
I attempted to move code around to resolve this, and my call *is* wrapped in $(document).ready(function() {…}); so I am not sure the same issue applies to my code.
============================================
Thank you for any and all time and effort placed into this, and sorry for a messy looking page, it was literally thrown together with gedit until I get this working.
Thank you, again.
Thank you Very much !!
Sooooo Nice !! I love the effects ! Thank you Very much !!
never mind. I figured it out. awesome!