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’
IT looks really nice, but sadly, is not working
the images are just one on top of the another.
The next and prev is not showing up. Can you please help me get it to show up in the slider navigation. I did not change anything.
I just want to say thanks for that slider control. I’ll use it on my web site.
Nice effect but slider not responsive and heavy..
Hey, man! This is an awesome little tool, but I found out that it lays over my divs, unable to render anything I want to show over it.
For example: I’ve got a navbar, and immediately under it, the Coin Slider. Whenever I hover over an and another should open up, it’s not visible because it’s rendered UNDER the coin slider.
Any ideas on a workaround to this problem?
I would like to pull the img files from a location such as: img/portfolio/file.jpg, but it doesn’t seem to like the location. So when I place the image in the root of the folder, it seems to want to tile the image and I believe this is due to the size of the image… So my questions are this: 1. Is there a way to have the slider pull the images from a location that’s a couple folders deep? 2. Do I have to set the image size (crop the image) before I have the slider call the image? 3. Can I possible have the js file set the image height to 325 and then have the image centered within the slider (so it won’t tile the image)?.. Thank you for your help. 🙂
First image is your sample, second one is mine. I am trying to use your slider in my .net project. jquery library’s .js and slider’s min.js paths in my masterpage’s head tags, slider’s css and script code as well. In usercontrol page, I added html codes. The problem as you can see is graphical problem. Slider is working but context’s backgroud color is not fill the bottom side. What can i do for it? What could be the problem?
Thank You
My images just stand one in top of the other. noob mistake, probably, but could someone help me? I used the example code. Thanks in advance
How do you resize it?
the image selection at the bottom doesn’t work, is there a way to fix or remove it?
This is a nice, tiny slider, however, there is one HUGE problem. Its not responsive! Therefore, unusable in nearly 99% applications. In other words, usable ONLY if on a big screen and not mobile devices.
Can i use video youtube embed inside this slideshow plz ?
Hi
It is not working with the other jquery-1.5.1.min.js file. As I need to use this as well. It gives me error as Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘cookie’
Thanks in advamce
it accompanied with jquery 1.4.2 so just add
jquery plugin directly from website, no need to download
Prev, Next not showing up,
set “navigation: true” or remove “navigation: false” it’s simple
I want to use this without the transition effects but when I make effect:none, there is a delay between the link and the image change on the carousel. So clicking on image 2 takes you to link 3.
Is there any way of implementing without effects but with no delay problems?
(p.s – it works perfectly with any of the transition effects)
Nick
I just want to say thanks for that slider control. I’ll use it on my web site.
Hi
Firstly screenshot : http://bit.ly/17PgAaX
First image is your sample, second one is mine. I am trying to use your slider in my .net project. jquery library’s .js and slider’s min.js paths in my masterpage’s head tags, slider’s css and script code as well. In usercontrol page, I added html codes. The problem as you can see is graphical problem. Slider is working but context’s backgroud color is not fill the bottom side. What can i do for it? What could be the problem?
Thank You
bonjour megha
écrivez moi a cette adresse sa sera plus simple
crashoverride5001@gmail.com
bonjour noisette,
J’ai vérifié votre site web à partir de mon android et il fonctionne parfaitement sur elle.
J’ai utilisé même code dans mon site mais curseur ne rentre pas dans l’affichage.
Si vous pouviez m’aider, je vais vraiment et vraiment être reconnaissants envers vous.
Son tour par défaut, essayer et vérifier le code que vous avez mise en œuvre.
Même chose pour moi parce que je ajouter le code dans un autre balise div qui Youse autre cclass css.
Donc, il se mélangent avec 2 css.
tout changement mineur sur la façon dont vous avez apllied code et vous obtiendrez le tour.
J’espère que ça aide.