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 (100)
    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 (1021)
    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,616 comments on "Coin Slider: Image Slider with Unique Effects"

Seems there is no support for this script!

rick horvath on November 30, 2016 at 10:50 pm

Thank you for your work on this. I’m putting it on my new website http://glendalehomesaz.com/ I appreciate your contribution to the open-source community.

Mickey on October 16, 2016 at 10:29 am

It would be great if the ‘dots/circles’ could be center justified AND also be on 2 rows.

I have a site using so many images that the last few ‘dots/circles’ do not display!

rick horvath on October 12, 2016 at 4:23 pm

How do I make it so the next and back buttons display all of the time – instead of just on a mouse hover?

Debbie on September 14, 2016 at 3:38 pm

Hi,
I can’t understand why href link on the first slide doesn’t work:
http://www.gardinicioccolato.it/
Could somebody help me?

Maurizio on February 9, 2016 at 12:00 pm

Hi, Great Slider :), I was wondering how to remove the buttons underneath the slider, but cannot see a way to do it, any advice would be greatly appreciated.

saco on December 8, 2015 at 5:50 pm

i am using the coin slider source code.I am not able to reduce height of the image kindly help me.As soon i reduce height to 290 then the image appears twice like half and half

neetha on November 9, 2015 at 10:42 am

Hello. i need help. How can make auto size slide? Example i have img 200×200 and x150x200, i want – slide must make resize for image.

Sorry for ban english…

alexk on September 21, 2015 at 8:19 pm

Hello, i need help please. How can do auto size slide? Example i have image with 200×200 and other 100×200, i need – slide must change size..

alexk on September 21, 2015 at 8:17 pm

Leave a Reply

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