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’

  • 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 […]
  • 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 […]
  • Coin Slider 4 WordPress (237)
    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 […]
  • Just Random Color (0)
    Some time ago I was working on app where for each category we had to assign random color in case that user didn't choose one. A few day ago I needed to generate random color again. Instead […]
  • JUST – JavaScript Useful Stuff (5)
    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 […]

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

This slider is so fucking fail I don’t know where to start. no one wants these stupid fucking irremovable buttons on the bottom of the slider. Who the fuck would want this shit. Read your comments everyone wants them to go away but your solution for removing them is WRONG and there is zero support. you are a shitty developer my friend.

Ian on April 6, 2015 at 2:23 pm

Dude. If you dislike it THAT much, go and design your own. That is, if you have the aptitude.

Andy on July 12, 2015 at 9:01 am

you realize its free right?

anonymous on August 12, 2015 at 3:29 am

and you realize it’s built 5 years ago

anonymous on August 15, 2015 at 12:04 am

thx info tutorial slider

lukman on April 3, 2015 at 3:13 pm

How do change coin slider size.
May be slider has dimensions: 440/181
How I increase slider size by picture dimensions or i select size.
I want slider size dimensions 775/320.
How it possible.
Please known to me urgently.

Md. Hasanur Rahman on March 27, 2015 at 8:17 am

Hello Ivan Lazarevic,

First, Congratz…amazing !! Now I would like to know:

– How to put image in others sizes, I can change width, but I can not change height, u can help me ???

THX

Dax on March 20, 2015 at 3:30 pm

Not responsive ?

¿?

old code, now send telephony devices

SNOMAR on March 18, 2015 at 4:21 pm

Thanx for your app. We would like to make it accessible for handicaps, is it possible to have a keyboard navigation to stop or go forward, backward ?

Jean Carfantan on March 7, 2015 at 8:09 am

I wanna change the 2 buttons (prev) and (next) whit image. How can I do this?

coguaro on February 17, 2015 at 8:36 am

try this guys for the standard left and right

$.swipe = function(el) {
e.preventDefault();
$.transition(el);
$.transitionCall(el);
}

thony on January 31, 2015 at 3:51 pm

hola me gusta la am¿nimacion de estas imagenes por lo cula me gustaria ver el archivo para darme una idea ya que estoy epezando a programar ecn jquery

hector leonardo on January 6, 2015 at 7:48 pm

Hi,

First off, great job! I want to know, how can I remove the bottom buttons that are below the images? The Previous & Next buttons are fine, but I don’t want the bottom buttons?

Thanks,
Danny

Danny on December 9, 2014 at 6:55 am

I found some mistake code when i’m resize a image, a opacity description layer can’t resize with setting.

I’m modified your code. I’m set your opacity description layer width same with image width size..

/*$(‘#’+el.id).append(“”)

$(‘#’+el.id).append(“”)*/

i’m sorry my english too bad.

thanks for your beautiful slider.

ado on November 12, 2014 at 3:06 am

I found some mistake code when i’m resize a image, a opacity description layer can’t resize with setting.

I’m modified your code. I’m set your opacity description layer width same with image width size..

$(‘#’+el.id).append(“”)

$(‘#’+el.id).append(“”)

i’m sorry my english too bad.

thanks for your beautiful slider.

ado on November 12, 2014 at 2:51 am

Not responsive ?
I will use responsive design.

dim on November 6, 2014 at 6:01 pm

How i can put a link in the title and description of the images??

Damian on November 1, 2014 at 11:46 pm

The option to define the fade time (of a square) would be really nice!

Sebastian on October 31, 2014 at 1:57 pm

Hi, it is very nice the script you have. How is it possibile to center everything?
Thanks.

Fux on October 21, 2014 at 6:50 am

Hi,
We are using your Coinslider plugin and its beautiful. But the header part of our website is about 940 px and the slider is about 800 px width. How can i increase the slider area without breaking the navigation parts? When i change 800 to 1000 it doesn’t fix there and there is a problem in arrows.
Thanks a lot.

Serhan Ok on October 20, 2014 at 4:01 pm

I wanna change the 2 buttons (prev) and (next) to (anterior) and (próximo). How can I do this?

Alan on August 14, 2014 at 6:35 pm

In the javascript file coin-slider.js and find:-

$(‘#cs-navigation-‘+el.id).append(“prev“);
$(‘#cs-navigation-‘+el.id).append(“next“);

Change prev and next to your requirements.

Richard Sanderson on November 5, 2014 at 1:45 pm

Hi,

I want to put two slider(side by side horizontally) on one page. Could you please help me in that.

Regards,
Sumit Tyagi

Sumit on July 30, 2014 at 9:55 am

Hi, Sumit.

Just change the name in the id attribute for each element like this:

and do the same in the jquery script:

$(‘#coin-slider5’)

kind regards

Angie on October 24, 2014 at 1:47 am

can I use it smartphone?
I will use responsive design.
but I don’t know how to resizing it.
tell me about it .

hitomi on July 18, 2014 at 1:00 am

very nice and beautifull works fine

Soft Sunrise on July 5, 2014 at 7:44 pm

Leave a Reply to Alan Cancel reply

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