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,448 Comments ]
» Trackbacks and pingbacks click to expand
-
[...] 14、Coin Slider [...]
-
[...] Coin Slider Using JQuery [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Coin Slider: Image Slider With Unique Effects [...]
Leave a Reply
More Articles
-
jqIsoText: jQuery Text Effect Plugin
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 plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On [...]
-
Animated Progress Bar in 4 lines of jQuery
Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is shown to user. That’s why is important that progress bar code is light weight so it can be loaded really fast at the [...]
-
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 with fancy transitions effects
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 effects. Mostly that was fading and sliding effects. I wanted something different so I decide to made my own slideshow gallery plugin for jQuery. [...]
May 13, 2013
Great slider, but i have a little problem. I need in hover event to change the position if the image. For example No hover the image is gray, in hover the image is colorfull. Any clue? I see the js but my efforts are not good enough. Thanks very much!
May 14, 2013
I have been trying to add .jpg images but it only shows blank, no image appears, can you help me?
Thanks
Altius Coaching
Description for img01
Description for imgN
$(’#coin-slider’).coinslider({ width: 560, height:300, navigation: true, delay: 5000 });
May 17, 2013
Hi friends!!!
I want to do one question about the Coin Slider. Woul be possible insert a video (flowplayer) inside it?
Thanks so much and have a nice weekend.
May 19, 2013
Car shopping is something which almost all adults will face in their lives.
If you want to drive, you’ll have to buy yourself a car. The simple ideas below will help you turn the car buying process into something you not only can handle, but that you are a master of.