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’

  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • 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 […]
  • 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 […]
  • 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 […]
  • 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 […]

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

Hey Lucrozade,
you can download my “fixed” Version here (http://tinyurl.com/39zfhsg).
Hope this helps…

Ingo on August 5, 2010 at 10:39 am

Ingo, I have the same problem, but your solution doesn’t seem to work for me :/

Lucrozade on August 4, 2010 at 4:40 pm

I got i figured out,
if you wanna have multiple rows you need to change the .css() in line 29 (coin-slider.min.js) to css({‘position’:’relative’});}

regards

Ingo on August 1, 2010 at 9:36 am

Hey,
first of – great plugin, i love it!

Unfortunately i have a little problem, i try to present about 30 pics with the slider and the navigation (little boxes) is overflowing. I searched my way through the css but wasn’t successful with changing the overflow mode. Is there any way to present for example two rows of “boxes” ?

thanks in advance!

Ingo on July 31, 2010 at 3:57 pm

can i add links to image description (titles)? I tried adding it in that , but they just don’t show up. Is it possible?

ace on July 30, 2010 at 1:17 pm

Poz, i havala za slider!

Interesuje me dali je moguce skinati slajder, recimo da se stave buttons na next i prev,…?

Hvala

Akki on July 29, 2010 at 2:42 pm

Hi!!! Great plugin, thanks for sharing!! I was wondering if there is a way to display images of different sizes.

Thanks again!

Lucrozade on July 28, 2010 at 4:18 pm

@Steph, @AirYT
Try to set spw: 1 and sph: 1

Lazarevic Ivan on July 28, 2010 at 1:25 pm

Yup – me too! Perfect slider for me, but i’m looking for some more basic effects. Fade for example. Thanks!

AirYT on July 28, 2010 at 10:22 am

Hello, i’m looking for change the effect transition off this slider, like fade in and out, or img left to img right… or remove them.
any solution ???

Steph on July 26, 2010 at 7:33 am

ah. sorry, found the problem already – it doesn’t work if you have WP Featured COntent slider installed from IWEBNIX.

thanks for this! love it.

Hayley on July 26, 2010 at 6:09 am

tried it on my local server but it doesn’t seem to work. any idea what could possibly be the problem? i have several plugins installed, perhaps there’s a plugin that is causing the problem?

Hayley on July 26, 2010 at 6:05 am

Great slider, congratulations Ivan,
a dear friend recommended your slider, and i love it, but this is my first time that i use it, but with some problem,

1. I need 3 sliders on the same page, so I create 3 diferent divs for it.
2. On firefox works great, but on the IE works good on the first page, but when you go to other page gets some error on line 15, chars 165. (coin-slider.min.js)
3. I have read on your comments that there are other people with the same problem, but i can’t find the way to fixit.

The page is on http://rod.gs/epagt after the index page, click on the banner to see the error.

thnks on advance.

Great job.

arigalt on July 25, 2010 at 7:22 pm

@Mitch McLeod
I think that you can, just try.

@Jan Luts
I build it to work with ids. Be aware that multiple sliders on one page can slow down transitions effects and it will use a lot of CPU.

Lazarevic Ivan on July 25, 2010 at 2:11 pm

Hi, this is a great one! Only I can’t seem to get it to work without using an id div, I want a class because I want more then 1 in my page..

Jan Luts on July 25, 2010 at 10:18 am

Hi Ivan,

Love this, works very well!

Is there a way I can have a h1 tag or paragraph tag within the description of each item?

Demo at http://www.mitchellmcleod.com/about/

Cheers,

Mitch.

Mitch McLeod on July 21, 2010 at 9:00 am

Is there a way to adjust the transition speed? Is set sph and spw to 1, for transition, but it transitions to fast. Thanks!

gdinari on July 20, 2010 at 12:02 pm

Michele, please check solution that I propose to Wass on previous comments page. It seems that there is some JavaScript conflict on your page.

Lazarevic Ivan on July 18, 2010 at 7:49 pm

Sorry Ivan, still me.
Explorer 8 is giving me a page error for coin-slider.js telling me that “jquery” is not defined at line 12…
Just to inform.
Hope to read from you soon.

Ciao!
Michele

Michele on July 18, 2010 at 3:52 pm

Hi Ivan!
I’ve downloaded and used your nice jquery slider…but it doesn’t work.
To be clear: in Chrome yes, but no way to see the transition in Firefox 3.6 and in Explorer 8 and in Safari 5.
Is it normal?
As I think your solution for a slider is one of the easiest and nicer around, is there something I did wrong?
Check my page at http://www.grapheion.org/FIS/index.html
Thanks a lot!
Michele

Michele on July 18, 2010 at 3:30 pm

is there a way to modify, so when the slide show contains multiple images, only one or two that i chose can be redirect links?
also can i move the description(in ) to appear on the middle or top of the image?

eudemon on July 16, 2010 at 9:09 pm

@gdinary
I’m not sure that I understand. It seems to me that everything works fine on url which you sent.

Lazarevic Ivan on July 15, 2010 at 9:12 am

Hi Ivan,

Maybe Im missing something, but I dont see any coding for the nav buttons to the slider. I managed to create some but can’t figure out out to link the buttons to the corresponding slide. Im pretty sure it has something to do with javascript, but I don’t see any.

I would appreciate any help. Thanks!

Here is the related page: http://www.skyviewmarketing.net/clients/Cheryl/photography.php#photography-top

Here is the coding that I used:

Stanley Cay Yacht Club in the Exumas, Bahamas

Junkanoo dancer in Inagua, Bahamas

….
….

Flamingos on Inagua, Bahamas



….
….

gdinari on July 7, 2010 at 9:14 pm

Yesss that works!!!
Thank you soooooo much for your time and help!!!!!

Wass on July 6, 2010 at 6:58 pm

Hi,

i’m having a major problem with with Coin Slider on IE, it tends to display the same image as twice and looks really funny.

Link to the website on IE: http://www.usp.ac.fj/?id=9384

would greatly appreciate some1’s help on it.

Vikash on July 6, 2010 at 6:39 pm

Leave a Reply

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