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’
$(‘#cs-buttons-‘+el.id).append(””+k+””);
This should work. Change the double ‘ into “
Sorry, my previous comment was destroyed by the site code,
`$(‘#cs-buttons-‘+el.id).append(““+k+”“);`
I spend the last 2 hours searching through the comments to find a way to add a thumbnail to the squares bellow.
I find a few hints but because I know more people will ask for that, to add thumbnails of the images you have, you must change line 268 to:
$(‘#cs-buttons-‘+el.id).append(““+k+”“);
background-size:cover means that the image will be resized to fit the square.
Mr. Lazarevic, I really suggest you put it in the documentation, because it is an often asked feature.
well this is an awesome tool and it works perfectly, but the one issue that is still left unresolved is that its quite difficult to resize the coinslider width and height to fit in its given , well, its bounding div resizes correctly in all browsers and screen resolutions including mobile phones but coin slider doesnt. So i think it will be best enough if someone can point it out clearly how to do this its really fustrating. i think the zoom = 1 function is close.
If its something to be adjusted in javascript, i think it should be made known, else it renders the slider unusable,
I am quite new at the moment to sliders and this is my first, i dont want it to be my worst. Any positive response please, asap.
Thanks
@em: I using FF, and it’s worked. I just want to know how to “stretch” my images, so they will always fix to its box or frame 🙂
help!!!!!
it does not work in firefox!!!
how this thing will work on all browsers!!
It seems only working in chrome..
🙁
Hi
I use this slideshow in my site and it is so useful for me
thanks
it have bug, block speed is still accelerating in firefox and chrome
Hi, I´would like to know if is it possible to change the name of the the button in the slider Prev, Next to Ant, Sig
Thanks
Hi friends!
I´m touch the css file and change the position and the title aspect. Now I have it on the left. Therefore, the image when change will stayed on the right. The background-position would be on the right, but stayes on left. The image is repeat on x.
I hope, somebody can help with me problem
Bye and excuse me my english.
Hello. Please help with coinslider ( plugin vSlider for wordpress ). On site http://sytyi-drakon.ru/ slider continuously download images when animation is played. And animation work slow because of that… Slider very good and I use it many times, but such problem I have never encounter..
P.S. Sorry for my English.
Thanx for provinding a beautiful slider thanx agin…………
Heya,
Thanks for sharing your awesomeness. I do however have one more question:
My pictures are not sized for your gallery, I had hoped that it would resize Width & Height until it fits and then leave the rest transparent with a dull color.
What it is doing right now = it’s showing the picture multiple times. A repeate function i gues? How does one go around this?
I just want to show some text when you click on the slide text below the slide (in css is cs-title), can you tell me the correct object to apply this on click function the way I want? I tried using the title ID to no result, like this:
$(‘#cs-title-coin-slider’).click(function (){
$(“span.texto”).toggle(25);
});
Thanks, very easy to use, excellent plugins
Description for img01
……
……
Description for img2
Description for img03
……
……
Description for img4
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 900, navigation: false, delay: 5000 });
});
this is my code wat am i doing wrong pliz help.
Thank you for making this slideshow code。。。
Doesnt work for me. Im a fool 🙁
nice work boss…
easy to use…
thanks
Great plugin. Precisely what i needed. Thanks
Awesome idid it in 2minutes 🙂
How to change the number of images to be displayed in the slider??? Plzzz reply fast