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.

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’

  • jqBarGraph – jQuery graph plugin (157)
    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 […]
  • Create image gallery in 4 lines of jQuery (146)
    Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image […]
  • Animated Progress Bar in 4 lines of jQuery (51)
    Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is […]
  • mooBarGraph: AJAX graph for MooTools (18)
    mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all […]
  • HTML5/CSS3 Circle Music Player (3)
    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 […]

1,638 comments on "Coin Slider: Image Slider with Unique Effects"

Thanks for making that great plugin.

I have a small request for the next version.

Currently if you mouse over a slide the Slide-show don’t stop. So if you are interested in one slide you cant see it because it will keep changing. So:
On mouse over – Slide-show pause,
On mouse out – Slide-show start!

Thank you! I hope you fix this annoying bug in next version.

ANDiTKO on April 11, 2010 at 5:29 pm

@Ivan

Any chance direction thing will get into some next version? 🙂 Sadly I suck at JS.

I was wrong about every change, seems more rare – but additional requests do get created. Here is Apache log from my local stack with page with slider just sitting open http://dropbox.rarst.net/coin-slider-apache-log.txt

Rarst on April 11, 2010 at 4:32 am

@Rarst
It’s possible to force single direction but for that you must change source code. There is no new image request for every change. Images are loaded just once.

@Ram
There was mistake on documentation. It should stay:

$(document).ready(function() {
$(’#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});

Lazarevic Ivan on April 11, 2010 at 4:09 am

@Ram

I also met this problem.
you just can’t use $(document).load() here.
use $(’#coin-slider’).coinslider() directly. it works.

danny on April 10, 2010 at 11:26 pm

Sorry is this one.

$(document).load(function() {
$(‘#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});


$(document).load(function() {
$(‘#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});

Ram on April 10, 2010 at 3:03 am

I dont know what I’m missing but it isnt work. This is my basic codec. thanks for to share this perfects things.

$(document).load(function() {
$(‘#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});


$(document).load(function() {
$(‘#coin-slider’).coinslider({ navigation: false, delay: 5000 });
});

Ram on April 10, 2010 at 3:01 am

Great contribution for web world. Amazing stuff for web designer to compete against flash animation. Expecting more gimmicks for you guys in future.

Thanks a Lot…!

Omprakash on April 9, 2010 at 11:56 pm

The jquery-1.4.2.js file is not in the download folder…

Priscilla on April 9, 2010 at 1:59 pm

And one more thing I noticed – looking at network tab in Firebug slider seems to generate GET request for image on every change.

Why does it need that? It can easily flood server with requests as I understand.

Rarst on April 9, 2010 at 8:44 am

Very solid and interesting slider, almost exactly what I wanted for new theme and I am testing how it fits now. Thank you!

Two questions:

1. Is it possible to force single animation direction? For example make it always go from left to right, instead of alternating directions between slides?

2. Why aren’t captions linked?

Rarst on April 9, 2010 at 8:30 am

Hi,

A nice slider, I like it very much. But this slider works very slowly in my IE browser. I dont know whether others are also have this problem.

wind on April 9, 2010 at 8:02 am

Ovo je odlicno..odlicni efekti.. Bilo bi jako dobro ako bi mogao od njih da napravis plugin..kao dodatak za easing ili tako nesto slicno.. To bi bilo savrseno!

Poz i keep up with the good work.

Boban Karišik on April 9, 2010 at 3:23 am

Thanks for comments guys, I’m glad that you like it : )

Raoni, this plugin doesn’t have option for that, but I’ll probably add that in future. For now I can offer you next solution. Below coinslider() call add those lines of code :

$('.cs-prev').html('text for prev');
$('.cs-next').html('text for next');

Lazarevic Ivan on April 8, 2010 at 2:38 pm

Looking forward to the WordPress version of this, it looks great!

Nigel on April 8, 2010 at 2:31 pm

I can not thank you enough, i have been looking for something like that for weeks. Thank you so much!!!

Omer on April 8, 2010 at 1:11 pm

Hi!
Great work!!!

How/Where can I translate the navigation (next/prev)???

Thanks very much!

Raoni on April 8, 2010 at 6:21 am

Chris, slider will pause when you put mouse over the image. You can disable that with set hoverPause:false.

Lazarevic Ivan on April 7, 2010 at 3:13 pm

Thanks so much for releasing this … it’s so very nice.

My only complaint is that there’s no ‘pause’ button or action.

Other than that, it’s perfect!

Chris on April 7, 2010 at 9:43 am

I wish these plugin came with a preload image setting ( limit the number of images called from the server). These plugins are great, but all the photos can’t be seen at one time, so why should I need to load them all. This kills mobile and low bandwidth development.

Add this functionality and I would use this on all the sites I build.

Koby on April 7, 2010 at 9:33 am

Benvie, thanks for sharing that url. I didn’t know for Uize before, those effects are really great. I’ll have hard time if I try to re-create them in jQuery : )

@USER
You can’t set background image to no-repeat or enlarge image automatically with Coin Slider. You must enlarge image before use.

Lazarevic Ivan on April 7, 2010 at 4:58 am

Hello,

Thank you for creating this awesome slider plugin!

Could you adivese how to set background-image url no-repeat?
or how to enlarge the image to fill in 100% width and height.

Thank you!

USER on April 7, 2010 at 1:26 am

It looks like your two plugins are accomplishing similar things to the image wipe widget for the Uize javacript library. I was thinking about trying to port the Uize code over to jQuery since I do all my work with it, but it seems like you’ve done most of the work already. You can see the widget in action here:

http://www.uize.com/examples/image-wipe.html

Might give you some more ideas too.

Benvie on April 6, 2010 at 1:39 pm

Tony, you should change .cs-prev and .cs-next classes, just remove text and background color and put arrows as background images.

Lazarevic Ivan on April 6, 2010 at 6:48 am

hi, awesome slider, man, what about is i want to use arrows for ‘next’ and ‘prev’,?

Tony on April 4, 2010 at 10:25 am

Fantastic, have been looking for new transitions within JQuery framework and this is the perfect antidote.

Paul on April 4, 2010 at 5:55 am

Leave a Reply to alexk Cancel reply

Your email address will not be published. Required fields are marked *