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 […]
  • 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 […]
  • 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 […]
  • Google Buzz ER: Google Buzz for Wordpress (137)
    Yesterday Google announced new service, Google Buzz, a new way to share updates, photos, videos and more, and start conversations about the things you find interesting. Today you can have […]
  • News Ticker in 4 lines of jQuery (93)
    There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines of jQuery code […]

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

bonjour,
j’ai réussi a intégrer le caroussel mais le texte ne s’affiche pas, savez vous pourquoi ?
liens du site: http://www.crash-override.fr/shop.html

et aussi les petits boutons sont carré comment les rendre ronds ?

merci d’avance

noisette on October 27, 2013 at 12:06 pm

Can anyone tell me,
This is not working well in mobiles.
I have use
$(‘#games’).coinslider({width: 1025, height: 310, delay: 7000});
Now if I change 1025 into any measurement to suit for mobile,(androids/iphone) desktop/laotop site also get disturb.
Can anyone help?

megha on October 25, 2013 at 11:44 pm

I want To Stop News Ticker on mouse hover.
Pls Tell Me How to Do this…

Nitin Bhatia on October 18, 2013 at 12:55 pm

I am not sure where you’re getting your information, but good topic.
I needs to spend some time learning much more
or understanding more. Thanks for magnificent information I was looking for this information for my mission.

help with relationships on October 17, 2013 at 10:06 pm

please help,

default active color for buttons is #B8C4CF, how can i assing a color for inactive buttons?

Snoopix on October 14, 2013 at 5:08 am

Awesome slider Ivan – One quick question – images sliding/fading from right to left direction – (not using the prev or next buttons)
How do I configure this?
Thanks

Vance on October 7, 2013 at 5:30 pm

Olá! mto bom esse script porém ocorreu um problema… conforme a imagem vai passando, a imagem anterior continua ficando duas imagens… uma por cima da outra. alguém sabe como corrigir isso, desde já agradeço.

Thaigo on October 4, 2013 at 12:30 pm

This is what i was looking after but will I be able to change the affect. the image to go up rather than sliding left to right or right to left

Malima on October 1, 2013 at 5:49 pm

@ oigo: I needed the same effect and I made it taht way:

1. As stated above I have set: spw: 1, sph: 1
2. In the file: coin-slider.min.js , row 28 I changed number 300 to 1500. Example:
$(‘#cs-‘+el.id+sid).css({opacity:0,’background-image’:’url(‘+images[el.id][imagePos[el.id]]+’)’});$(‘#cs-‘+el.id+sid).animate({opacity:1},1500)

Now it looks good 🙂

Adam

Adam on October 1, 2013 at 2:58 am

I love it, its simple small and neat, the only thing I miss is simple fade effect. Is there any way to add such?

oigo on September 26, 2013 at 2:21 am

Hi. Thanks for such a great plugin.
However….
I have gallery with more than 20 images.
Is there any way to reduce initial page load time, by adding images dynamically ??

Gopal Chavan on September 25, 2013 at 4:57 am

Hi there

I have made all my images the same dimenisions and still can’t coinslider to resize

I have read the comments and i have attempted but had no luck could you emial be at l.r.panszczyk@student.saintkentigern.com and I will spend you my code a print screen image

thanks

Louis on September 21, 2013 at 6:42 pm

Hi there,

I am just curious if the window has to be that size or if it is possible to make it smaller. The div box I have is smaller so the next button is not able to view because it extends passed the division box. How do I make it smaller? Thank you!

Drew

Drew Thomas on September 21, 2013 at 3:21 am

This coin slider help me a lot.

But still I want to know is there any way to change the shape of the bottom navigation from square to circle, change the color and the position of the navigator?

Thanks.

hallen on September 20, 2013 at 3:40 am

You sir, rock! Thank you Adam!!

Guru on September 17, 2013 at 5:58 pm

@Guru: set spw: 1, sph: 1 🙂

Adam
http://www.luczak.pl

Adam on September 16, 2013 at 6:14 am

I have a quick question about “effects”, is there a way to just go to the next image without any of the transitional effects?

Guru on September 12, 2013 at 2:34 pm

I really do love this plugin but the images do not adjust to the width and height designated. If the images are bigger than the specified width and height, the slideshow simply crops the picture. How do I work around this?

KingArthur13th on September 11, 2013 at 6:40 pm

its woking veryy nicelyyyyy,,,,,, tnk uuu 🙂

shailly on September 7, 2013 at 1:14 am

i have used this slider…..its workin vry nicelyyy….. thn uu so much.. 🙂

shailly on September 7, 2013 at 1:13 am

I have used this lovely slider in my actual project. Thank you very much.

Sinan E. on September 4, 2013 at 1:27 pm

Thank you. It very helpful.
For me, javascript, html and etc., like Chinese. But even I was figured out with that script. And a lot of new and interesting things learned. Thank you.

Sonia on September 4, 2013 at 12:50 pm

Leave a Reply

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