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’

  • Fancy Transitions Featured Gallery for WordPress (62)
    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 […]
  • Coin Slider 4 WordPress (236)
    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 […]
  • Gradienter: Add gradient to elements (22)
    Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that […]
  • jqIsoText: jQuery Text Effect Plugin (101)
    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 […]
  • Image gallery with fancy transitions effects (1023)
    I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition […]

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

Images can’t be re-sized with Coin Slider.

If you need my help please provide me url where I can see your problem.

Lazarevic Ivan on June 1, 2010 at 6:29 pm

why its not resize images?

gin on May 31, 2010 at 7:28 pm

Hi

Great flexible slider. Much more flexible than the Nivo-slider.

However I think I have a little issue. How can I obtain a ‘fullscreen’ window using coin-slider which resizes as the browser window is resized using the following CSS rules >

width:100% and height:100% with zoom: 1

My images are 1024px X 768px

I’d like to also keep the div class “csbuttons” about 50px from the top of the screen.

Sorry this is urgent.

Regards

Zee

Zeechyke on May 30, 2010 at 7:14 pm

oh attached is my coding. all the images and links are in working order.

—————


—-

$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 500, effect: ‘straight’, delay: 3000 });
});

Natalie on May 30, 2010 at 11:22 am

Hi. I have been trying to get my coin slider to work for the past 2 hours but my images do not load for some reason. The arrows and navigation boxes appear but not the images. I can also see that the slider is running and continues to play over and over again.
But again, NO IMAGES! :((
Help?

Any help would be HIGHLY appreciated.

Natalie on May 30, 2010 at 10:11 am

Is it possible to resize the images? I have changed the height and the width of the panel and my images are bigger than the new size so I only can see a little part of them and I wanna see them as they are but smaller.

Thanks!

Marta on May 29, 2010 at 8:42 pm

This is master, Congratulations

Edison on May 28, 2010 at 7:37 pm

@Lazarevic Ivan Thanks! The code on the bottom helped to solve some of my issues, but still can’t get the layout right. 🙂

Arlen on May 28, 2010 at 6:05 pm

This is a great plugin!

I was just wondering if there was a way to have the images only play once and then stop on the last image instead of continuing to play over and over again?

Thanks!

Cindy on May 28, 2010 at 3:33 pm

jQuery question: Is this script compatible with Google’s jQuery version (1.3.2)? I’d prefer to source Google’s library vs. the included 1.4.2 since it’s faster.

quanta on May 26, 2010 at 9:16 pm

Thanks Ivan, works like a charm 😉

Hein on May 26, 2010 at 7:34 am

can i add number of pages below the slides? with 1 2 3 4 ? thanks

julius on May 25, 2010 at 9:38 pm

Just add !important for .cs-active background

.cs-active{ background: url(../images/slide-nav-active.png) no-repeat !important; height: 16px; width: 16px;}

Lazarevic Ivan on May 25, 2010 at 7:55 pm

Hi Ivan,

Here’s the preview -> http://www.heinmaas.com/files/hein/test/index.html

did try that solution but no luck.

Hein on May 25, 2010 at 2:14 pm

Hein, please provide me url with example. I think that you should do this:

.cs-active{ background: url(../images/slide-nav-active.png) no-repeat; height: 16px; width: 16px;}

Lazarevic Ivan on May 25, 2010 at 1:27 pm

PS: I’ve managed to ad the images but i can’t find a way to make the active state to work.

.cs-buttons { font-size: 0px; padding: 25px 10px 10px 10px; float: left; }

.cs-buttons a { background: url(../images/slide-nav-not-active.png) no-repeat; margin-left: 5px; height: 16px; width: 16px; float: left; border: none; color: #B8C4CF; text-indent: -1000px; }

.cs-buttons a:hover { background: url(../images/slide-nav-active.png) no-repeat; margin-left: 5px; height: 16px; width: 16px; float: left; border: none; color: #B8C4CF; text-indent: -1000px; }

.cs-buttons a:active{ background: url(../images/slide-nav-active.png) no-repeat; height: 16px; width: 16px;}

.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

Hein on May 25, 2010 at 12:19 pm

It is a nice plugin! But i want to know anyway can change the pagination button to a image buttons(Including the active status of the button)?

First of all, great plugin. I’m tring to implement this in to a theme i’m building but i can’t find the older comment your referring to.

@Magneto
It can be done with CSS. Check older comments.

Any help would highly appreciated 😉

Hein on May 25, 2010 at 12:16 pm

Is it possible to “not auto slide”?
Images should only slide by clicking on “prev/next-buttons”

Kalle on May 25, 2010 at 3:32 am

You should try to put javascript code at the end of the page.

Lazarevic Ivan on May 24, 2010 at 6:57 pm

Hi,
I am having an issue and I’m not smart enough to solve it…

But first of all, thanks for the wonderful slider. It’s the best I’ve used.

My issue is that the navigation boxes are blowing out my layout. And I can’t seem to find a way to fix it.
I’ve added a width to the .coin-slider in the css and that helps, but there’s still margin or padding that I can’t get rid of on the boxes.

The other thing is I will only need 3 boxes for 3 images, but 4 appears as a default.

Thanks!

Arlen on May 24, 2010 at 4:58 pm

It seems that additional CSS to .coin-slider make a problem, remove display: inline

Lazarevic Ivan on May 24, 2010 at 11:57 am

Great slider. I ham having a slight problem. My page is adding side scroll bars. Other pages on my site do not. Only the one with the slider. I have 5 images and there is also 5 dots on the other side of the page Any ideas?
Here’s the page http://maxfit.us/index1.html thanks!

Rafael on May 24, 2010 at 3:28 am

Great slider. I ham having a slight problem. My page is adding side scroll bars. Other pages on my site do not. Only the one with the slider. Any idea?
Here’s the page http://maxfit.us/index1.html thanks!

Rafael on May 24, 2010 at 3:26 am

Thanks, this slider gallery is perfect – it’s like the one on Apple’s iTunes page.

Just FYI, I modified coinslider.php so that query_posts checks Pages instead via ‘post_type=page’; for some reason ‘post_type=any’ fails.

I have noticed a little quirk when handling pages: the setting “Number of Posts to Display:” actually encompasses the most recent # of pages, regardless of whether they have the csImage custom field or not.

Therefore, one could have the setting set to say “3” and not have anything appear if all these csImage flags are attached to Pages that are older than the most recent 3. Increasing the “Number of Posts” number until it does encompass all Pages in the chronological timeline you wish to display seems to fix this issue.

quanta on May 22, 2010 at 10:46 pm

when add links to the span area it getting messy when previewing content in safari and chrome(ggl)

reyamnd on May 18, 2010 at 12:18 am

Leave a Reply

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