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’
how i can change the image width, height
i want to know how can i change the width and the height of image in tje js file
thanks
Hi friends!!!
I want to do one question about the Coin Slider. Woul be possible insert a video (flowplayer) inside it?
Thanks so much and have a nice weekend.
I have been trying to add .jpg images but it only shows blank, no image appears, can you help me?
Thanks
Altius Coaching
Description for img01
Description for imgN
$(‘#coin-slider’).coinslider({ width: 560, height:300, navigation: true, delay: 5000 });
Great slider, but i have a little problem. I need in hover event to change the position if the image. For example No hover the image is gray, in hover the image is colorfull. Any clue? I see the js but my efforts are not good enough. Thanks very much!
Dear All!
Is it possible to use different delay between images?
Thank you in advance!
Hi all:
I’m very new at this so pardon my ignorance.
I want to install coinslider on a magento CE (not Magento GO) installation. My confusion is where precisely do I put the various coinslider files, and from where do I call them? Also, I’ll need to incorporate jquery no-conflict into the routine.
I have seen many conflicting instructions across the web. I hope someone can offer a definitive answer to my question. Again I apologize for being so ‘nooby’ but this has baffled me for hours, and I hope to get a definitive answer.
Thanks in advance,
Markz
Hello,
First off I wanted to say thank you for this awesome, simple to use Jquery slideshow script! It works so incredibly well, is easy to customize, and you guys aren’t out to make a buck off of it like other stupid slideshows out there.
Second, to help some users on here. @Rob, no you cannot use this with flash/embedded media/youtube videos. Media like videos cannot be manipulated by HTML/CSS. I’ve done a similar thing for a job with YouTube videos and the only thing you can really do is hide the DIV videos are in, you can’t really do any fancy animation.
@Tom That’s possible with latest version from GitHub
@Rob Coin Slider doesn’t supports videos
@Jeff It’s just CSS, you can see source on demo page
I really like the look of “The More Awesome Jquery Image Slider”. Is this version available, or is it just a matter of styling it?
Can I embed YouTube videos? If so, how?
Hi, can anyone tell me how to fix the image size as 100% in slider div. I tried by giving the background-size: 100% 100% and background-repeat: no-repeat, the size of the image is stretched fully in the div but the navigation link and the slider effect is not shown.
Thanks in advance…!
Hello,
I try to use the slider with pictures with transparent regions but when slide is changed i see the previous under the current one. How to hide the previous slide after affect end.
Darius
I was wondering if there was a way to make the caption bar/ background color transparent by lowering the opacity, but the caption text and everything on the caption bar have 100% opacity.
Is it possible to remove an Transition effects?
Have an small transition PC (formfactor like an USB Stick) with android and it stucks a lot. As we don’t need any effects it would be great to remove them. I tried use: “effect: false” but still have an smooth transition effect between the images.
Hello there, awesome slider I much appreciate the work put into this, I had to use padding to move the slider to where I wanted on my webpage, however I lost my next text on the navigation. Is there any way to get rid of the prev/next on the navigation without getting rid of the squares option on the bottom? Or a way I can find to place “next” back on my navigation? Thank you
just testing this slider out for a new website and im having an issue with the slides scaling or auto scaling the images. what am i missing to match the file size or have the slider scale the images to autofit into the slides.
Thanks.
Please, can one use images of different sizes with this? and if possible can you please give me a detailed description of how to go about it.
it is fixed on the image size.how to change the image width and hight?
can it be responsive? because i want to open this gallery in my mobile.
how can i adjust the size of the title bar
Hi
I have problem. When zoom in or zoom out web browser only on Mac OS ( Mountain Lion ) Slider have lines ( intersection ). Any solution ?
Does anyone know how can I replace the navigation text “prev” and “next” with arrow images?