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’
bonjour,
j’ai réussi a intégrer le caroussel mais le texte ne s’affiche pas, savez vous pourquoi ?
liens du site: http://www.crash-override.fr/shop.html
et aussi les petits boutons sont carré comment les rendre ronds ?
merci d’avance
Can anyone tell me,
This is not working well in mobiles.
I have use
$(‘#games’).coinslider({width: 1025, height: 310, delay: 7000});
Now if I change 1025 into any measurement to suit for mobile,(androids/iphone) desktop/laotop site also get disturb.
Can anyone help?
I want To Stop News Ticker on mouse hover.
Pls Tell Me How to Do this…
I am not sure where you’re getting your information, but good topic.
I needs to spend some time learning much more
or understanding more. Thanks for magnificent information I was looking for this information for my mission.
please help,
default active color for buttons is #B8C4CF, how can i assing a color for inactive buttons?
Awesome slider Ivan – One quick question – images sliding/fading from right to left direction – (not using the prev or next buttons)
How do I configure this?
Thanks
Olá! mto bom esse script porém ocorreu um problema… conforme a imagem vai passando, a imagem anterior continua ficando duas imagens… uma por cima da outra. alguém sabe como corrigir isso, desde já agradeço.
This is what i was looking after but will I be able to change the affect. the image to go up rather than sliding left to right or right to left
@ oigo: I needed the same effect and I made it taht way:
1. As stated above I have set: spw: 1, sph: 1
2. In the file: coin-slider.min.js , row 28 I changed number 300 to 1500. Example:
$(‘#cs-‘+el.id+sid).css({opacity:0,’background-image’:’url(‘+images[el.id][imagePos[el.id]]+’)’});$(‘#cs-‘+el.id+sid).animate({opacity:1},1500)
Now it looks good 🙂
Adam
I love it, its simple small and neat, the only thing I miss is simple fade effect. Is there any way to add such?
Hi. Thanks for such a great plugin.
However….
I have gallery with more than 20 images.
Is there any way to reduce initial page load time, by adding images dynamically ??
Hi there
I have made all my images the same dimenisions and still can’t coinslider to resize
I have read the comments and i have attempted but had no luck could you emial be at l.r.panszczyk@student.saintkentigern.com and I will spend you my code a print screen image
thanks
Hi there,
I am just curious if the window has to be that size or if it is possible to make it smaller. The div box I have is smaller so the next button is not able to view because it extends passed the division box. How do I make it smaller? Thank you!
Drew
This coin slider help me a lot.
But still I want to know is there any way to change the shape of the bottom navigation from square to circle, change the color and the position of the navigator?
Thanks.
You sir, rock! Thank you Adam!!
@Guru: set spw: 1, sph: 1 🙂
Adam
http://www.luczak.pl
I have a quick question about “effects”, is there a way to just go to the next image without any of the transitional effects?
I really do love this plugin but the images do not adjust to the width and height designated. If the images are bigger than the specified width and height, the slideshow simply crops the picture. How do I work around this?
its woking veryy nicelyyyyy,,,,,, tnk uuu 🙂
i have used this slider…..its workin vry nicelyyy….. thn uu so much.. 🙂
I have used this lovely slider in my actual project. Thank you very much.
Thank you. It very helpful.
For me, javascript, html and etc., like Chinese. But even I was figured out with that script. And a lot of new and interesting things learned. Thank you.