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,450 Comments ]
» Trackbacks and pingbacks click to expand
Leave a Reply
More Articles
-
jqBarGraph – jQuery graph plugin
jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome [...]
-
Image gallery in 4 lines of code with MooTools and Dojo
Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and Dojo.
Task is the same. One large image, description bar, few thumbs bellow, large image and description should change when thumb is clicked. [...]
-
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 [...]
-
Google Buzz ER: Google Buzz for Wordpress
Yesterday Google announced new service, Google Buzz, a new way to share updates, photos, videos and more, and start conversations about the things you find interesting. Today you can have Google Buzz posts on your WordPress site.
Google Buzz Er is Wordpress plugin for showing public Google Buzz posts for selected Google account. All you have [...]
June 25, 2012
Scratch the part of my previous post about lack of the navigation CSS selector in the file. It is there in the CSS file
Again, thanks for an awesome plug in!!!!!
June 25, 2012
I used this slider on a personal website, but the silder efects like swirl, only appears in IE9 on compatibility mode, on Chrome, Firefox and opera dosen’t work, i’m using jquery 1.6.4 is any problem whit this? can you help me?
June 26, 2012
Hi there! Thanks a lot for the plugin. Is there anyway to make this work only with a simple fade effect?
Thanks a lot !!!!
June 26, 2012
This is a good slide show! I am trying to use it in HTML5 ASP .NET 4.0 website built with Visual Studio 11 and am getting the following error:
Microsoft JScript runtime error: Object doesn’t support property or method ‘coinslider’
Here is my code:
$(document).ready(function () {
$(’#coin-slider’).coinslider({ width: 260, height: 167, navigation: true, delay: 4000 });
});
Any ideas?
June 27, 2012
Hey there,
it’s a great plugin and the slider looks pretty cool. But I have a big problem – it doesn’t work with another plugin I’ve installed (online booking calendar). So I already asked the guy who developed the template and the guy who developed the other plugin and both try to help me but they need the information if the coin slider plugin supports jQuery 1.7.1 or 1.7.2.
Thanks for your help…
June 28, 2012
Not working. Tried everything. Checked syntax, spent time to examine working one on page, experimented, even clean everything to basic, and… nothing.
Can’t figure it out, but I guess, this error is something from “space”, as even tottaly clean one for test run – won’t work.
July 1, 2012
very good plugin. it would be good to correct the transparency of the text in title, because opacity is linked to the whole object! please add the option “opacityText”, thanks
July 3, 2012
Hi,
Great plugin! Works like a charm. I just wanted to know if there was a way to remove the navigation squares under the image or move them to on top of the image? I am using the slider on a website I’m making and I don’t want the squares at the bottom but would prefer them on the image.
I would really appreciate help on this.a
July 6, 2012
Thanks
Your plugin is great!!
July 7, 2012
Hi, Great work – now – any chance to have events triggered and exposed?
July 7, 2012
Hi, nice slider, i had put it into my webiste, you’re in the credits of my webpage. (You can check it on the bottom of my webpage)
July 11, 2012
Hi there,
How can i change the image size?
Thhe images in the slider be smaller then the real size.
But a simple height=”150px” won’t work.
July 11, 2012
Hi!
I found the slideshow really nice, but i’ve a question
There’s any way to define a delay for the tittle appearce?
Something like, until the picture is not completely shown, the tittle does not appear
Thanks!
July 12, 2012
Thanks .. This is working great on my website. however sadly it is not displaying the image descriptions added between the span tag.
Any possible causes ? Is it something to do with CSS styling ?
July 12, 2012
Hey guys, this won’t work at all for me. In Chrome, FF, or IE. Firefox and Chrome are the latest release (as of this writing) and IE is IE8.
I’ve downloaded the latest Jquery file and included it in the header of my document along with all of the other necessary coin-slider stuff.
Seen here:
Down below I have a div with an id titled “coin-slider” and within this div I have the and tags that the author stated should be used. I have two such images nested inside this div..
However the end result merely has these two images repeated and stacked vertically. As if the JQuery is literally doing nothing at all!
Near the end of the html, right above the end of the body tag, I put:
$(document).ready(function() {
$(’#coin-slider’).coinslider();
});
</script
Could really use some insight here guys!
July 12, 2012
test page. I can’t find why not working. thanks for great script
July 12, 2012
never mind. I figured it out. awesome!
July 13, 2012
Sooooo Nice !! I love the effects ! Thank you Very much !!
July 13, 2012
Thank you Very much !!
July 14, 2012
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.