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’



Comments [ 1,578 Comments ]

  1. noisette
    October 28, 2013

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

  2. Selim
    November 7, 2013

    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

  3. L
    November 12, 2013

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

  4. Nick
    December 3, 2013

    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

  5. Vinit S
    December 4, 2013

    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

  6. Mohamed
    December 7, 2013

    Can i use video youtube embed inside this slideshow plz ?

  7. Rob
    December 7, 2013

    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.

  8. daniel
    May 6, 2014

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

  9. daniel
    May 6, 2014

    How do you resize it?

  10. Azevedo
    May 12, 2014

    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

  11. cong nghe
    May 14, 2014

    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

  12. JR
    May 14, 2014

    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. :)

  13. Pachu
    May 19, 2014

    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?

  14. Dmitry
    June 3, 2014

    Nice effect but slider not responsive and heavy..

  15. gladiator
    June 5, 2014

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

  16. Aaron Andeson
    June 20, 2014

    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.

  17. Hachi
    June 20, 2014

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

  18. Soft Sunrise
    July 5, 2014

    very nice and beautifull works fine

  19. hitomi
    July 18, 2014

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



» Trackbacks and pingbacks click to expand

  1. [...] Coin-slider link >> Coin-slider official site [...]

  2. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  3. [...] ve Android ve iPhone desteği ile popüler jQuery slide eklentisidir. Ayrıntılı Bilgi: http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/ Download: https://code.google.com/p/coin-slider/downloads/list [...]

  4. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  5. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  6. [...] 6、COIN SLIDER:这个 jQuery 幻灯片插件也很棒,兼容所有主流浏览器(包括IE6),以及在Android和iPhone上的兼容。幻灯片可灵活配置,支持HTML标记等功能。 [...]

  7. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  8. [...] Первая вёрстка с использованием jQuery плагина Coin Slider и media queries. Минимальное разрешение экрана для [...]

  9. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  10. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  11. [...] 6、COIN SLIDER:这个 jQuery 幻灯片插件也很棒,兼容所有主流浏览器(包括IE6),以及在Android和iPhone上的兼容。幻灯片可灵活配置,支持HTML标记等功能。 [...]

  12. [...] MORE INFO / DEMO (free plugin) [...]

  13. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  14. [...] Coin Slider es un plugin de jQuery que permite crear carrusel de imágenes muy fácilmente en nuestra web, el uso es muy basico pero con algunas modificaciones y buenas ideas se pueden hacer diseños muy buenos. [...]

  15. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  16. [...] each time. A smooth sliding animation is used to transition between steps.Coin Slider – MORE INFO / DEMOThis jQuery slider features smooth transition (slice images in squares) effects and is [...]

  17. [...] Further Reading/Credit: CoinSlider [...]

  18. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  19. [...] Image Slider with Unique Effects (demo | download) [...]

  20. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  21. [...] 6、COIN SLIDER:这个 jQuery 幻灯片插件也很棒,兼容所有主流浏览器(包括IE6),以及在Android和iPhone上的兼容。幻灯片可灵活配置,支持HTML标记等功能。 [...]

  22. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  23. [...] Coin Slider: Image Slider With Unique Effects [...]

  24. [...] e é compatível com Internet Explorer 6 +, Firefox 2 +, Safari 2 +, Google Chrome 3 +, Opera 9 +MAIS INFO / DEMO (plugin gratuito)52. jQuery Carousel MsCada carrossel pode ter próprio olhar & [...]

  25. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  26. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  27. [...] Image Slider with Unique Effects (demo | download) [...]

  28. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  29. [...] Image Slider with Unique Effects (演示 | 下载) [...]

  30. […] Image Slider with Unique Effects (演示 | 下载) […]

  31. […] Image Slider with Unique Effects (演示 | 下载) […]


Leave a Reply

More Articles


more on WORKSHOP.rs