Coin Slider: Image Slider with Unique Effects
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’
Comments [ 1,448 Comments ]
» Trackbacks and pingbacks click to expand
Leave a Reply
More Articles
-
Twitter Flock for Wordpress: multiple accounts tweets with style
Twitter Flock is Wordpress plugin for showing multiple accounts tweets with different color scheme for every account. Also, there are setting allowing you to control how your tweets will look like and will they cache or not.
One of the things that make this plugin different form other are tabs above Twitter Flock box. This tab [...]
-
HTML5/CSS3 Circle Music Player
More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we start to work on this a few things were changed.
[He have more great designs which you'll see if you go to his [...] -
News Ticker in 4 lines of jQuery
There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines od jQuery code ?
Idea is pretty simple, take first element from list, apply some disappearing effect on it and on [...]
-
Coin Slider 4 WordPress
Coin Slider 4 WP will show your featured posts as image slider and rotate them using unique effects provided by jQuery’s Coin Slider.
Implementation is very easy, after you download and activate this plugin, just paste one line of code in your template and Coin Slider 4 WP is ready to use.
Demo pagesee how it worksDownloadtry [...]
August 6, 2012
Hi, how can i implement a custom startsequence? I mean that the images start randomly.
August 7, 2012
how can I disable title option
August 7, 2012
Mete Han just delete span tag in the content
August 8, 2012
is it touchable? shall i use it with ipad/iphone?
August 9, 2012
What if an image is larger of the intended size? It seems that it is cropped … Can the image be resized to the slider intended size (i.e 565 x 256 )?
August 9, 2012
Thank you. Excellent instructions. Great product.
August 10, 2012
nice work…i want to know how to change slider prev & next button..how to replace it image..i need your help immediately…
tnx
….
August 11, 2012
Gracias desde Argentina, muy bueno tu slide! saludossss
August 12, 2012
I’ve implemented this on several clients sites. Works great, but there is one strange thing that seems to keep happening. It’s not really a deal breaker but I figured I would post it here in case there is a fix/explanation for it.
The slider transitions seem to speed up if you leave the page open for an extended period of time. I’m not sure exactly how long it is until it’s noticeable, as I’ve just come back to windows I’ve left open and noticed it.
Basically, you cannot see the squares fade in and out after a while, it’s just instant. Maybe the times are stacking on each other after cycling through all images? Is this a know issue or is there a fix?
Thanks!
August 15, 2012
Nice and light plug-in. Thanks for it.
However I see strange behaviour.
If my image width is considerably lesser than the slider’s width, the image gets repeated.
Here is my setting
Slider width – 565px
image width – 390px
Can this be avoided?
August 15, 2012
Tanks, I f you give me to scope free plugins .
Golam Hasnaine
August 16, 2012
how can i make this just fade and not use cubes…i tried making them 1 by 1 but it still does the cube thing…
August 18, 2012
thank you it is very useful for me but i have problem with width of title box.plz help me
August 20, 2012
Wondering if there is a way to stop it after X number of cycles through the photos placed, so it does not continually cycle through over and over again.
photo 1, photo 2, photo 3, photo 1, photo 2, photos 3, stop.
Thanks!
August 20, 2012
you also need to add this :
otherwise your script will not work
trust me, i find that the hard way
have fun
August 21, 2012
yo! aloha! now i’m giving a try on this script. wish it would work as it should be.
August 22, 2012
I am trying to use it and it works, except I am trying to float something to the right of the slider and it does not work. Left of it works fine. Any ideas why this would happen and what I can do to fix it?
August 23, 2012
I got this to work, except it will not let me float a div tag to the right of it. Could someone help me, it is because of the javascript, but I cannot figure out what to do to fix this.
August 24, 2012
Excelente plugins, gracias
desde Chile
August 25, 2012
Works great in Firefox, Chrome, Safari, Opera, but – of course – not in stupid Internet Exploder. Does anyone know a hack to make this awesome slider work in IE? It is just sittin g there on the first image, no text bar on the bottom, no navigation prev/next…