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’
Images can’t be re-sized with Coin Slider.
If you need my help please provide me url where I can see your problem.
why its not resize images?
Hi
Great flexible slider. Much more flexible than the Nivo-slider.
However I think I have a little issue. How can I obtain a ‘fullscreen’ window using coin-slider which resizes as the browser window is resized using the following CSS rules >
width:100% and height:100% with zoom: 1
My images are 1024px X 768px
I’d like to also keep the div class “csbuttons” about 50px from the top of the screen.
Sorry this is urgent.
Regards
Zee
oh attached is my coding. all the images and links are in working order.
—————
—-
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 500, effect: ‘straight’, delay: 3000 });
});
Hi. I have been trying to get my coin slider to work for the past 2 hours but my images do not load for some reason. The arrows and navigation boxes appear but not the images. I can also see that the slider is running and continues to play over and over again.
But again, NO IMAGES! :((
Help?
Any help would be HIGHLY appreciated.
Is it possible to resize the images? I have changed the height and the width of the panel and my images are bigger than the new size so I only can see a little part of them and I wanna see them as they are but smaller.
Thanks!
This is master, Congratulations
@Lazarevic Ivan Thanks! The code on the bottom helped to solve some of my issues, but still can’t get the layout right. š
This is a great plugin!
I was just wondering if there was a way to have the images only play once and then stop on the last image instead of continuing to play over and over again?
Thanks!
jQuery question: Is this script compatible with Google’s jQuery version (1.3.2)? I’d prefer to source Google’s library vs. the included 1.4.2 since it’s faster.
Thanks Ivan, works like a charm š
can i add number of pages below the slides? with 1 2 3 4 ? thanks
Just add !important for .cs-active background
.cs-active{ background: url(../images/slide-nav-active.png) no-repeat !important; height: 16px; width: 16px;}
Hi Ivan,
Here’s the preview -> http://www.heinmaas.com/files/hein/test/index.html
did try that solution but no luck.
Hein, please provide me url with example. I think that you should do this:
.cs-active{ background: url(../images/slide-nav-active.png) no-repeat; height: 16px; width: 16px;}
PS: I’ve managed to ad the images but i can’t find a way to make the active state to work.
.cs-buttons { font-size: 0px; padding: 25px 10px 10px 10px; float: left; }
.cs-buttons a { background: url(../images/slide-nav-not-active.png) no-repeat; margin-left: 5px; height: 16px; width: 16px; float: left; border: none; color: #B8C4CF; text-indent: -1000px; }
.cs-buttons a:hover { background: url(../images/slide-nav-active.png) no-repeat; margin-left: 5px; height: 16px; width: 16px; float: left; border: none; color: #B8C4CF; text-indent: -1000px; }
.cs-buttons a:active{ background: url(../images/slide-nav-active.png) no-repeat; height: 16px; width: 16px;}
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
First of all, great plugin. I’m tring to implement this in to a theme i’m building but i can’t find the older comment your referring to.
Any help would highly appreciated š
Is it possible to “not auto slide”?
Images should only slide by clicking on “prev/next-buttons”
You should try to put javascript code at the end of the page.
Hi,
I am having an issue and I’m not smart enough to solve it…
But first of all, thanks for the wonderful slider. It’s the best I’ve used.
My issue is that the navigation boxes are blowing out my layout. And I can’t seem to find a way to fix it.
I’ve added a width to the .coin-slider in the css and that helps, but there’s still margin or padding that I can’t get rid of on the boxes.
The other thing is I will only need 3 boxes for 3 images, but 4 appears as a default.
Thanks!
It seems that additional CSS to .coin-slider make a problem, remove display: inline
Great slider. I ham having a slight problem. My page is adding side scroll bars. Other pages on my site do not. Only the one with the slider. I have 5 images and there is also 5 dots on the other side of the page Any ideas?
Here’s the page http://maxfit.us/index1.html thanks!
Great slider. I ham having a slight problem. My page is adding side scroll bars. Other pages on my site do not. Only the one with the slider. Any idea?
Here’s the page http://maxfit.us/index1.html thanks!
Thanks, this slider gallery is perfect – it’s like the one on Apple’s iTunes page.
Just FYI, I modified coinslider.php so that query_posts checks Pages instead via ‘post_type=page’; for some reason ‘post_type=any’ fails.
I have noticed a little quirk when handling pages: the setting “Number of Posts to Display:” actually encompasses the most recent # of pages, regardless of whether they have the csImage custom field or not.
Therefore, one could have the setting set to say “3” and not have anything appear if all these csImage flags are attached to Pages that are older than the most recent 3. Increasing the “Number of Posts” number until it does encompass all Pages in the chronological timeline you wish to display seems to fix this issue.
when add links to the span area it getting messy when previewing content in safari and chrome(ggl)