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’

  • jQuery Snow Falling plugin (114)
    I like winter because of holidays and snow. Not big fan of going to shopping and buying New Year gifts and presents, but I am fan of snow and snowboarding. That's why I enjoy watching how […]
  • 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 […]
  • Coin Slider 4 WordPress (237)
    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 […]
  • Twitter Flock for Wordpress: multiple accounts tweets with style (69)
    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 […]
  • Use Webcam to Create Animated GIF (1)
    Some time ago I saw some online animated gif creator and thought it could be done in JS instead of Flash. We could easily access webcam from browser with the getUserMedia API. Nice […]

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

Great work !!!

Hidayet Ok on April 23, 2010 at 11:19 pm

Excelente script!!!
Saludos desde Mexicali, B.C., Mexico

Naoki on April 23, 2010 at 1:35 pm

How can i add more strips???

mellow on April 23, 2010 at 9:25 am

Sabrina, this slider doesn’t have zipper effect, you should use jqFancyTransitions for that.

Ben, I don’t see that images are chopped. If you want you can remove buttons below slider if you add this in your CSS:
.cs-buttons { display: none; }
or
#cs-buttons-ID_OF_SLIDER { display: none; }

Lazarevic Ivan on April 22, 2010 at 1:38 pm

Great slider! One thing I’ve not been able to figure out though is how to disable the navigation buttons below the slider. It’s chopping the bottom 10-or-so pixels off of my images, just like it is doing with the demo’s images.

Ben Carlson on April 22, 2010 at 12:10 pm

Hellow,

This a very nice slider.. I have 2 questions.. Is it possible to get the transition from this one http://workshop.rs/projects/jqfancytransitions/ ( the zipper)

and how can i add more strips?

I had this one http://workshop.rs/projects/jqfancytransitions/ but i don’t know how to change the navigation numbers into a image..

and this one had it so i changed it :d

Sabrina on April 22, 2010 at 6:52 am

Tommy, you can achieve fading effect if you set spw and sph to 1.

Lazarevic Ivan on April 21, 2010 at 7:50 am

Great work!!! thanks but please add also html file

Raghib suleman on April 21, 2010 at 12:35 am

hello!!!!!!

not found with

Description for img01

dyscordia on April 20, 2010 at 12:03 am

Nice slider. Anyway to make a Fading effect??
Thanks

Tommy on April 19, 2010 at 9:33 pm

Very useful thanks !

Maybe nextime a plugin for wordpress ?

Congratulations

oblik on April 19, 2010 at 9:24 am

Hello.

Thanks for you’re slider, I put it on my new website yesterday, and it was easy to use and adapt.
My only complain is there’s no play/pause button. Even if you can pause when the mouse is on an image, it could be good to have au play/pause button.

If you do this, coin slider will be the best slider ever.

Thanks a lot by the way !

John on April 18, 2010 at 6:59 am

Hi, Totally new to this and im sure ive done this wrong. Ive placed the <script….. (The 3 lines of it) just after my head tag.

Then, copied the rest where i want the pictures to be displayed on my html file:

……………. etc… Also placed the
$(document).ready(function() etc….. after them above…
In the same folder as my html file placed the java script files.. Now all i have is two links and two squares with red crosses in?
Please help what am i doing wrong? 🙁
Im sure its just me being stupid.. lol please help..
Dave 🙂

Dave G on April 15, 2010 at 8:59 am

Jhon, can you tell me what you want to achieve with this code ?

Lazarevic Ivan on April 15, 2010 at 3:57 am

@ivan
Hello
my code for thumb images

	for(k=1;k&lt;images[el.id].length+1;k++){
				//$(&#039;#cs-buttons-&#039;+el.id).append(&quot;<a href='#' rel="nofollow">"+k+"</a>");
				$('#cs-buttons-'+el.id).append("");
			
			}

but it does not work…can you help me find the error..
Error displaying image

Jhon Doe on April 14, 2010 at 8:29 am

@Ivan

I’ve looked at some other sliders and it is hardly exclusive to your scripts. Most complex animations make use of backgrounds and so can generate those requests.

Hard to say if this is under-known issue or just considered necessary evil.

I am still undecided if I should live with it or go with simpler animation.

Rarst on April 13, 2010 at 4:58 pm

@Rarst
It’s interesting, I didn’t know that. I’ll have that on mind for my future work. Thanks for share.
Both plugins works on same principle and it will be hard to change that.

@Stephen
Shadow is background image of slider wrapper.
I don’t know how to center image, I think that it can’t be done, but if you find solution please share with us.

@Leo Balter
You must use id’s. I don’t know how many sliders you want on page that you need to select them by class name, but be careful multiple sliders can affect on transition smoothness.

Lazarevic Ivan on April 13, 2010 at 2:27 pm

Very easy to use. thanks

NssY on April 13, 2010 at 1:48 pm

I tried to apply the plugin to other way selected objects and got a exception. Example: $(‘.coinSlider’) … This is only working if I direct the plugin to id’s selected objects.

Are you looking to solve this?

Leo Balter on April 13, 2010 at 9:45 am

Hello
not planning to do so only with text based div

Jhon Doe on April 13, 2010 at 7:37 am

Nice slider! Like the compact install. Couple of questions;

(1) How did you achieve the image shadow in the demo?
(2) Any way to center the slider (image) – tried a few CSS things but no go.

Also, image sizing (or even image centering with no-repeat) would be a very nice extra feature. Keep up the good work!

Stephen on April 12, 2010 at 2:55 pm

@Ivan

I’ve asked around about requests. Best answer I got is that you change image as background URL and this can be interpreted by browser as new object that requires downloading. To have no requests one must manipulate objects, already present on page – hiding and showing them with display property for example.

By the way jqFancyTransitions also generates those requests, I assume it uses similar code.

Rarst on April 12, 2010 at 5:25 am

Rarst, I’m not sure why that happen, I don’t have any additional request in plugin. Regarding changing of direction, just find this line in coin-slider.js reverse[el.id] *= -1; and change to reverse[el.id] = 1;

Lazarevic Ivan on April 11, 2010 at 5:43 pm

Ahhhh… sorry… i didn’t see that you have the option: “hoverPause: true // pause on hover” .Ignore my previous comment. This slide-show ROCKS man! Keep the good work, wish you the best!

ANDiTKO on April 11, 2010 at 5:35 pm

Leave a Reply

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