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’
At Last! Human Sounding Text To Speech 2020 (NEW). For a free demo. Reply to this email: nancyfadodd@gmail.com
While we can set the width for coinslider, is there a way for it to resize the images to be shown?
For example, the images are of width 500 pixels.
When the screen is maximized, we set coinslider to width: 800 but the images are repeated inside it.
Is there a way to just scale the images?
It will be good if the scaling can be done when the screen is smaller than the images.
I love your slider. Thanks for your open-source contribution. It’s very useful.
Hi! Great Slider, But no one is there to answer the queries. People are asking for help.
thanks for slider, very good
thanks for slider, very good
Seems there is no support for this script!
thanks for slider, very good
Thank you for your work on this. I’m putting it on my new website http://glendalehomesaz.com/ I appreciate your contribution to the open-source community.
It would be great if the ‘dots/circles’ could be center justified AND also be on 2 rows.
I have a site using so many images that the last few ‘dots/circles’ do not display!
How do I make it so the next and back buttons display all of the time – instead of just on a mouse hover?
Hi,
I can’t understand why href link on the first slide doesn’t work:
http://www.gardinicioccolato.it/
Could somebody help me?
Hi, Great Slider :), I was wondering how to remove the buttons underneath the slider, but cannot see a way to do it, any advice would be greatly appreciated.
i am using the coin slider source code.I am not able to reduce height of the image kindly help me.As soon i reduce height to 290 then the image appears twice like half and half
Hello. i need help. How can make auto size slide? Example i have img 200×200 and x150x200, i want – slide must make resize for image.
Sorry for ban english…
Hello, i need help please. How can do auto size slide? Example i have image with 200×200 and other 100×200, i need – slide must change size..