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’
Appreciate if you can create an image thumbnail slider with the option to add child elements.
I would thought it like this:
[ ] -> thumbnail image
TITLE -> title of image
DESCRIPTION -> some description
LINK -> can be image or text
at the bottom will have a thumbnail page browser.
Great work by the way! Please add the request on your collection :).
I placed the coin slider on a website and it now interferes with the drop down menu above it. How can i move the coin slider behind the drop down menu?
Excellent! Simply one of the best tools out there!
I just have another query, the img tiled/repeat in coin-slider div. I tried to override the coin-slider img with background-repeat: no-repeat but no effect taken.
Thanks for the reply.
not working…. i have 3 images and looks like it does not apply the style… here is the code
Attachment
Attachment
Attachment
not working…. i have 3 images and looks like it does not apply the style… here is the code
Attachment
Attachment
Attachment
for a simple fade, set options
spw: 1, // squares per width
sph: 1, // squares per height
sDelay: 0, // delay beetwen squares in ms
enjoy!
@Lazarevic Ivan thanks. it worked… good thinking.
Is it possible to have a simple fade effect with this slider? I ideally only want to be able to see one image at a time (without the squared effect).
I have implemented a coin slider on the home page of my website (see below):
http://www.indigobluetrading.com
I have added links from each of the images to the corresponding product pages however if you click on an image on the slider the link points to the product page for the next image. There appears to be a problem with the timing of the first image (it pauses for sometime which may be pushing the links out of sinc??) Are you able to advise?
Hi, this is great and awesome! It’s very easy to use and so handy. But I have one wish, if there is a away that transitions will do in random order, maybe another option to set. Thanks!
Hello,
I don’t really have a solid understanding of the MIT licence so I ask just to be safe.
This slider is perfect for a project that I’m doing for a client. I am looking to use this slider on the front page for a company. Do I have any obligations if I do this?
Wonderful works btw. This one a beauty.
I also need to have a simple quiet fade effect. Is there a simple way of modifying the code to allow this?
Thank you in advance!
Does Coin slider has a simple quiet fade effect?
Thank you!
very nice 🙂 easy to use, really thanks 🙂
Hi,
I have copied your code to try this, i replaced your img links with some images from my computer. when i preview in Firefox all i get is the coinslider with a blank white background, and when i add the code that you have at the end, with the delay ect it still has this problem.
I am having alot of problems with jquery sliders including ‘Cycle’ and cant seem to get the javascript to work even when its directly copy and pasted.
Please help if you can!
I modified the code, now it resizes the image 🙂
Olá, gostaria de saber como faço para extender a imagem para o tamanho da tela? “fullscreen”.
Hello, I’d like do know how can i extend the image do fullscreen.
I have the coinslider and unclear as to how to link the images to pages. Please help!
Nice! Thanks you! From Argentina 🙂
Can’t comment links… Use the Jquery from the official Website instead of the included script
Seems to be a problem with the included Jquery script.
Try using this instead.
Приветствую !
Подскажи пожалуйста, гдевыставить прозрачный фон и как убрать задержку пскрытия предыдущей картинки, после того как отрисовалась следущая. Потому как у меня слайды с прозрачностью и предыдущая картинка какое то время еще висит на заднем плане
Finally everything work, ty!!!