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’
This was the easiest jquery plugin integration I’ve ever dealt with! cheers mate && tnx
Hey, this slider is great. Thanks for posting it!
But, I’m having a bit of trouble with it. It looks really great on a site I’m building in both FireFox and Chrome, but IE refuses to work with it. Every time I load the page in IE, each image in the slideshow shows up on page as if the script just didn’t load.
Here’s the function I’m using:
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 1050, height: 515, delay: 7000, sDelay: 50, opacity: 0.8, effect: ‘straight’, hoverPause: true });
});
Any ideas on a fix? Thanks a ton!
Can you look at the web site I provided?
Why the slides show is not working?
Thanks
Hi, thanx for this great plugin! I have a question: I would like the prev and next button to be visible all the time, not only when hovering the image. Can anyone help with that?
Hi,
first of all it´s an awesome plugin but is it possible to add multiple sliders on one page without coping the whole js file.
I tried to change the id zo a class but this class was already used.
Hi there.
great plugin, thank you
I am using this plugin in my wordpress site, and it’s working great.
Is it perhaps possible to include different slider images on different pages? Perhaps example, -tell wordpress, that if ‘page’ is “home”, then display images 1,2,3,4 – and if ‘page’ is “about-us”, then display images 5,6,7 ?
Thank you
From looking at the .JS it’s changing the Link id to =’cs-“+el.id+i+j+”‘ If you can determine what this is, you should be able to pass the link to another function.
Trying to use you’re slider to flip through some pictures. When the pictures are clicked on the links are to be passed to another function, that opens a video in an iframe popup. Looking at you’re JS code, it seems that you change the id’s and class for all the links. Is there another way to pass a link through the slider and then to another function?
Brandon, that was the problem I definitely had the coinslider bigger than the container. Problem solved!
Thanks!
Alex, make sure your width within that code you posted is less than the element containing the slider. my slider was wider than the containing div and it removed my next button.
i have tried a lot but i dnt know why these sliders are not working for website,always facing this problem have tried all the available solutions but this problem has never solved
Uncaught TypeError: Object [object Object] has no method ‘coinslider’
This is a great slider, but I’m having a weird issue. I turned on the navigation function, and the previous button shows up fine, but the “next” button is not showing up. This is my mark up.
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 900, height: 400, hoverPause: false, navigation: true, delay: 5000 });
});
any reason as to why the “next” button would disappear like that? I haven’t altered your CSS or js at all. Thanks!
I am not able to load images, it shows the blank banner area. Examples are preferred.
My images are all different sizes and they repeat when theyre too small. how do i set them to no-repeat and center them within the slideshow?
Hi!
Could you, please, include a page or two with examples of how to use it, of course, if you don’t mind and, if you have the required time for it?
Agree with the comment below:
“I have been trying to add .jpg images but it only shows blank, no image appears, can you help me?”
Just blank images showing up. Here’s my script description:
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 980, height: 500, navigation: true, delay: 5000 });
});
Finally I can move position of bullets, but I dont know how delete space in the bottom of banner slider, please check the next image http://2imgs.com/2i/i/51a5f53b/779479061f8f229fa109a53cbd781617/7b0c3e14c7.f.jpg
thanks
Hello, how can I change position of bullets in coinslider? please help me. Thanks
I have coinslider adn work fine, now I try use lighbox with somes images but dont work? why cant work togueters?
Thank you for a great product. We’re drafting a website for a client and have used the coin-slider slideshow – The client wants the images only to simply fade slowly – can you please let us know if this is possible and what we need to change in the code? We’re using:
* Coin Slider – Unique jQuery Image Slider
* @version: 1.0 – (2010/04/04)
Hi there, I’ve been using your plugin to develop a website. First of all, thanks for all your job! Your plugin fits perfectly into my layout!
I’m currently facing two problems though.
– the website I’m building has a horizontal scrolling way of navigation. Therefore, I have 6 pages scrolling from right to left to switch categories. And therefore, I have six of your plugins on :). Though they seems to work nicely all the six together, I’d like to stop 5 of them according to the page showing. You have no option like so such as a ‘start’ ‘false’ I could fiddle with so it behaves in the way I want. Where should I start to look into your script first?
– When I add a link over my image, the description disapears. Have you reckoned this problem before?
Thanks again! 🙂
Hello, Please can you tell me if there is a way I can have the slider without the black section along the bottom ie. in the example at the top of the page the bit that says “mini ninjas etc”
Thanks!
Great slider!
Cool Slider, Thank you very much.
Shopping for cars is generally a stressful experience.
It does not have to be, though. With a little knowledge and determination, your car shopping experience can be devoid of stress.
Use the tips that follow to make your car shopping experience one that you enjoy, with a shiny
new car to show for it.