Coin Slider: Image Slider with Unique Effects

April 4th, 2010 | Projects, jQuery | 1,448 Comments

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.

Demo pagesee how it works Downloadtry it for yourself Source codefork me on GitHub

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 ]

Steve
July 14, 2012

Solved, Andreas over at stackoverflow nailed it… had a misplaced bracket.
AK
July 14, 2012

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?
AK
July 14, 2012

in regard to the previous post the html rendered the code

” This is a Hyperlink “
Leo
July 15, 2012

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?
Leo
July 15, 2012

I already fixed, but i have 1 question, there is a way to move the coins? maybe inside the picture
Jeff
July 17, 2012

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 ?
Marcus
July 17, 2012

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?
achim
July 18, 2012

Hallo, nice slider but how can i fit picture to slider size?
Red
July 18, 2012

The transition speeds up and goes faster and faster as time sits.

Any idea why, or what can stop it?
Leo
July 22, 2012

thanx
Faynoit
July 24, 2012

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.
jamie
July 24, 2012

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?
Koustav
July 26, 2012

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
Kevin Mata
July 26, 2012

@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; }
sky
July 28, 2012

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.
Alexander
July 29, 2012

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.
Josephus Flavius
July 30, 2012

Great looking slider!

Question: How compatible the version available for download is with WP 3.4.x ?

When found on WordPress, the following warning is issued:

This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

see: http://wordpress.org/extend/plugins/coin-slider-4-wp/

Any thoughts of issuing an updated version that would be declared ’safe’ with current and future WP releases?

Many Thanks!
JF
tommy
August 1, 2012

hi

i really like to know how to install this module
everyone says it’s easy but i got confused.

please help me i need explaination step by step

thanks
you the man.

tommy
Alan
August 2, 2012

really nice plugin, nicely done. clean code, easy to understand.

bit of feedback:

from me: don’t pollute jQuery namespace, use an internal variable to store methods. this protects your functionality from external overrides, and prevents you from unwittingly changing the behaviour of jquery. e.g. what if jquery added their own $.effect function.

from our users: pause was quite a sticking point, we’ve added pause on click, pause on navigate etc. this requires a pause function that clears the interval instead of a pause variable, otherwise the nav will stop working. it also requires modding the hoverPause behaviour slightly so the slider doesn’t unpause on mouseout. this worked better for us.

still the best slider plugin i’ve used to date.
Wraine Meadows
August 2, 2012

Does anyone have a list of transitions they can email me? wraine13@yahoo.com.

This slider is fantastic. I have used Nivo in the past, but this is much easier to use.

» Trackbacks and pingbacks click to expand

JUST – JavaScript Useful Stuff
I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly change, I had to find a way to make my life easier. That’s why I wrote a group of JavaScript range functions which helps me to [...]
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 [...]
jqIsoText: jQuery Text Effect Plugin
Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that. One of them is jqIsoText.

With this plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On [...]
Fancy Transitions Featured Gallery for WordPress
ftFeatured is Wordpress plugin for creating image gallery with fancy transition effects of featured posts. You can choose between three types of transition effects: curtain, wave and zipper. Also, you can set width, height, delay time, number of posts etc.
This WordPress plugin is based on jQuery jqFancyTransitions plugin and is very easy to use. After [...]

WORKSHOP
owned by Ivan Lazarevic