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.
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,449 Comments ]
» Trackbacks and pingbacks click to expand
-
[...] 演示 下载 [...]
-
[...] [...]
-
[...] Coin-slider link >> Coin-slider official site [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] 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 [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Get More Demo [...]
-
[...] Coin Slider [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] 6、COIN SLIDER：这个 jQuery 幻灯片插件也很棒，兼容所有主流浏览器（包括IE6），以及在Android和iPhone上的兼容。幻灯片可灵活配置，支持HTML标记等功能。 [...]
-
[...] Coin Slider [...]
-
[...] 6. Coin Slider [...]
-
[...] 6. Coin Slider [...]
-
[...] Coin Slider [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Первая вёрстка с использованием jQuery плагина Coin Slider и media queries. Минимальное разрешение экрана для [...]
-
[...] 6. Coin Slider [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
Leave a Reply
More Articles
-
Fancy Transitions Featured Gallery for WordPress
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 zipper. Also, you can set width, height, delay time, number of posts etc.
This WordPress plugin is based on jQuery jqFancyTransitions plugin and is very easy to use. After [...] -
Image gallery in 4 lines of code with MooTools and Dojo
Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and Dojo.
Task is the same. One large image, description bar, few thumbs bellow, large image and description should change when thumb is clicked. [...]
-
Twitter Flock for Wordpress: multiple accounts tweets with style
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 look like and will they cache or not.
One of the things that make this plugin different form other are tabs above Twitter Flock box. This tab [...]
-
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.
Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. Basically [...]
May 24, 2010
Great slider. I ham having a slight problem. My page is adding side scroll bars. Other pages on my site do not. Only the one with the slider. I have 5 images and there is also 5 dots on the other side of the page Any ideas?
Here’s the page http://maxfit.us/index1.html thanks!
May 24, 2010
It seems that additional CSS to .coin-slider make a problem, remove display: inline
May 24, 2010
Hi,
I am having an issue and I’m not smart enough to solve it…
But first of all, thanks for the wonderful slider. It’s the best I’ve used.
My issue is that the navigation boxes are blowing out my layout. And I can’t seem to find a way to fix it.
I’ve added a width to the .coin-slider in the css and that helps, but there’s still margin or padding that I can’t get rid of on the boxes.
The other thing is I will only need 3 boxes for 3 images, but 4 appears as a default.
Thanks!
May 24, 2010
You should try to put javascript code at the end of the page.
May 25, 2010
Is it possible to “not auto slide”?
Images should only slide by clicking on “prev/next-buttons”
May 25, 2010
First of all, great plugin. I’m tring to implement this in to a theme i’m building but i can’t find the older comment your referring to.
Any help would highly appreciated
May 25, 2010
PS: I’ve managed to ad the images but i can’t find a way to make the active state to work.
.cs-buttons { font-size: 0px; padding: 25px 10px 10px 10px; float: left; }
.cs-buttons a { background: url(../images/slide-nav-not-active.png) no-repeat; margin-left: 5px; height: 16px; width: 16px; float: left; border: none; color: #B8C4CF; text-indent: -1000px; }
.cs-buttons a:hover { background: url(../images/slide-nav-active.png) no-repeat; margin-left: 5px; height: 16px; width: 16px; float: left; border: none; color: #B8C4CF; text-indent: -1000px; }
.cs-buttons a:active{ background: url(../images/slide-nav-active.png) no-repeat; height: 16px; width: 16px;}
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
May 25, 2010
Hein, please provide me url with example. I think that you should do this:
.cs-active{ background: url(../images/slide-nav-active.png) no-repeat; height: 16px; width: 16px;}
May 25, 2010
Hi Ivan,
Here’s the preview -> http://www.heinmaas.com/files/hein/test/index.html
did try that solution but no luck.
May 25, 2010
Just add !important for .cs-active background
.cs-active{ background: url(../images/slide-nav-active.png) no-repeat !important; height: 16px; width: 16px;}
May 25, 2010
can i add number of pages below the slides? with 1 2 3 4 ? thanks
May 26, 2010
Thanks Ivan, works like a charm
May 26, 2010
jQuery question: Is this script compatible with Google’s jQuery version (1.3.2)? I’d prefer to source Google’s library vs. the included 1.4.2 since it’s faster.
May 28, 2010
This is a great plugin!
I was just wondering if there was a way to have the images only play once and then stop on the last image instead of continuing to play over and over again?
Thanks!
May 28, 2010
@Lazarevic Ivan Thanks! The code on the bottom helped to solve some of my issues, but still can’t get the layout right.
May 28, 2010
This is master, Congratulations
May 29, 2010
Is it possible to resize the images? I have changed the height and the width of the panel and my images are bigger than the new size so I only can see a little part of them and I wanna see them as they are but smaller.
Thanks!
May 30, 2010
Hi. I have been trying to get my coin slider to work for the past 2 hours but my images do not load for some reason. The arrows and navigation boxes appear but not the images. I can also see that the slider is running and continues to play over and over again.
(
But again, NO IMAGES!
Help?
Any help would be HIGHLY appreciated.
May 30, 2010
oh attached is my coding. all the images and links are in working order.
—————
—-
$(document).ready(function() {
$(’#coin-slider’).coinslider({ width: 500, effect: ’straight’, delay: 3000 });
});
May 30, 2010
Hi
Great flexible slider. Much more flexible than the Nivo-slider.
However I think I have a little issue. How can I obtain a ‘fullscreen’ window using coin-slider which resizes as the browser window is resized using the following CSS rules >
width:100% and height:100% with zoom: 1
My images are 1024px X 768px
I’d like to also keep the div class “csbuttons” about 50px from the top of the screen.
Sorry this is urgent.
Regards
Zee