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’

  • 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 […]
  • Bigshark – larger buttons on Grooveshark (0)
    GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on […]
  • JavaScript Art: Triangles (1)
    You can see abstract triangles art everywhere these days. They are on banners, wallpapers, decorative pillows, fliers, tattoos, book covers... Just put a bunch of triangles and some colors […]
  • 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 […]
  • Gradienter: Add gradient to elements (24)
    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 […]

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

IT looks really nice, but sadly, is not working
the images are just one on top of the another.

Hachi on June 20, 2014 at 6:04 pm

The next and prev is not showing up. Can you please help me get it to show up in the slider navigation. I did not change anything.

Aaron Andeson on June 20, 2014 at 1:21 am

I just want to say thanks for that slider control. I’ll use it on my web site.

gladiator on June 5, 2014 at 11:59 am

Nice effect but slider not responsive and heavy..

Dmitry on June 3, 2014 at 5:42 pm

Hey, man! This is an awesome little tool, but I found out that it lays over my divs, unable to render anything I want to show over it.
For example: I’ve got a navbar, and immediately under it, the Coin Slider. Whenever I hover over an and another should open up, it’s not visible because it’s rendered UNDER the coin slider.
Any ideas on a workaround to this problem?

Pachu on May 19, 2014 at 2:12 pm

I would like to pull the img files from a location such as: img/portfolio/file.jpg, but it doesn’t seem to like the location. So when I place the image in the root of the folder, it seems to want to tile the image and I believe this is due to the size of the image… So my questions are this: 1. Is there a way to have the slider pull the images from a location that’s a couple folders deep? 2. Do I have to set the image size (crop the image) before I have the slider call the image? 3. Can I possible have the js file set the image height to 325 and then have the image centered within the slider (so it won’t tile the image)?.. Thank you for your help. 🙂

JR on May 14, 2014 at 4:40 pm

First image is your sample, second one is mine. I am trying to use your slider in my .net project. jquery library’s .js and slider’s min.js paths in my masterpage’s head tags, slider’s css and script code as well. In usercontrol page, I added html codes. The problem as you can see is graphical problem. Slider is working but context’s backgroud color is not fill the bottom side. What can i do for it? What could be the problem?

Thank You

cong nghe on May 14, 2014 at 8:18 am

My images just stand one in top of the other. noob mistake, probably, but could someone help me? I used the example code. Thanks in advance

Azevedo on May 12, 2014 at 6:44 pm

How do you resize it?

daniel on May 6, 2014 at 9:04 pm

the image selection at the bottom doesn’t work, is there a way to fix or remove it?

daniel on May 6, 2014 at 8:26 pm

This is a nice, tiny slider, however, there is one HUGE problem. Its not responsive! Therefore, unusable in nearly 99% applications. In other words, usable ONLY if on a big screen and not mobile devices.

Rob on December 7, 2013 at 8:43 pm

Can i use video youtube embed inside this slideshow plz ?

Mohamed on December 7, 2013 at 12:05 pm

Hi
It is not working with the other jquery-1.5.1.min.js file. As I need to use this as well. It gives me error as Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘cookie’
Thanks in advamce

Vinit S on December 4, 2013 at 4:43 am

it accompanied with jquery 1.4.2 so just add

jquery plugin directly from website, no need to download

Prev, Next not showing up,
set “navigation: true” or remove “navigation: false” it’s simple

dave marco on May 2, 2015 at 9:44 pm

I want to use this without the transition effects but when I make effect:none, there is a delay between the link and the image change on the carousel. So clicking on image 2 takes you to link 3.

Is there any way of implementing without effects but with no delay problems?

(p.s – it works perfectly with any of the transition effects)

Nick

Nick on December 3, 2013 at 10:14 am

I just want to say thanks for that slider control. I’ll use it on my web site.

L on November 12, 2013 at 4:39 pm

Hi

Firstly screenshot : http://bit.ly/17PgAaX

First image is your sample, second one is mine. I am trying to use your slider in my .net project. jquery library’s .js and slider’s min.js paths in my masterpage’s head tags, slider’s css and script code as well. In usercontrol page, I added html codes. The problem as you can see is graphical problem. Slider is working but context’s backgroud color is not fill the bottom side. What can i do for it? What could be the problem?

Thank You

Selim on November 7, 2013 at 10:26 am

bonjour megha
écrivez moi a cette adresse sa sera plus simple
crashoverride5001@gmail.com

noisette on October 28, 2013 at 1:07 pm

bonjour noisette,
J’ai vérifié votre site web à partir de mon android et il fonctionne parfaitement sur ​​elle.
J’ai utilisé même code dans mon site mais curseur ne rentre pas dans l’affichage.
Si vous pouviez m’aider, je vais vraiment et vraiment être reconnaissants envers vous.

megha on October 28, 2013 at 10:39 am

Son tour par défaut, essayer et vérifier le code que vous avez mise en œuvre.
Même chose pour moi parce que je ajouter le code dans un autre balise div qui Youse autre cclass css.
Donc, il se mélangent avec 2 css.
tout changement mineur sur la façon dont vous avez apllied code et vous obtiendrez le tour.
J’espère que ça aide.

megha on October 28, 2013 at 1:08 am

Leave a Reply to coguaro Cancel reply

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