I needed a “3D” carousel to rotate images. The currently available jQuery plugins for this purpose were either too large, too restricted (showing only 4 at a time is not good enough), or too old (not working in jQuery 1.4+).
So I wrote my own.
In our CMS, WebME, this is available in the Image-Transition plugin. (If you’re interested in using WebME, you can either download it through SVN, or talk to us about our reseller deals.)
How the thing works, is that you add a list of images to an element like this:
<div id="k3dCarousel"> <img src="images/concrawood.jpg" /> <img src="images/fernheasty.jpg" /> <img src="images/mcnallys.jpg" /> <img src="images/northernstandard.jpg" /> <img src="images/soccertours.jpg" /> <img src="images/soundinsulation.jpg" /> <img src="images/textaroom.jpg" /> <img src="images/windhoist.jpg" /> </div>
Then link to the jQuery library and the jquery.k3dCarousel plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.k3dCarousel.min.js"></script>
And then tell jQuery to run the plugin after all the images have loaded:
<script>
$(window).load(function(){
$('#k3dCarousel').k3dCarousel();
});
</script>
If you want, you can vary the speed of the cycle by changing the sT (spin-time) variable, or the wT (wait time), which govern how long it takes for the images to move from point to point, and how long they pause once reaching there:
<script>
$(window).load(function(){
$('#k3dCarousel').k3dCarousel({
wT: 500,
sT: 100
});
});
</script>
Interested yet? Download it (tar.bz2, zip)
that’s pretty awesome!
Great work. Can you include left and right navigation button?
I’ll improve on it after work today. maybe add a google code project for it to track issues
@irengba, I’ve added directions. not yet perfect. I’ll improve it later. but you can add whatever HTML you want for the arrows – replace with arrows, pictures, whatever.
download from http://demo.verens.com/k3dCarousel-1.1.tar.bz2 or http://demo.verens.com/k3dCarousel-1.1.zip
great job..! i’ll try this for prestashop module..! it may be works.
Thanks. Looking forward to your final release.
Awesome… i will put this effect to my web… btw, how i can stop the rotation when i mouse over it…
thanks
@sakawijaya – that’s not in it at the moment.
so, the current issue list is:
1. left/right links don’t work immediately.
2. pause on hover.
3. there’s a bug if the images have different aspect ratios.
I’ll see if I can get some time this evening to work on it
All three of the above issues have been addressed. See here for more.
Thanks for your new release –> k3dCarousel-1.2
Thanks man….. this a great plugin!
This is really so small in size, I myself could not beleive it at first. I have installed it in my web (http://nazmulweb.com/site5/demo/carousel/) along with other carousels and it is working smoothly. Thank you so much for your great effort. I had a wish to make such a plugin but I am still novice in the fileld of jQuery.
Hey first of all it’s great job!
I would like to know why the first press on the left side, rotate to right and not to left.. Only the first pressed.
Thanks!
to be honest, I’ve no idea!
I did notice that bug, but didn’t spot in five minutes why it was happening, then had other stuff to do. If anyone spots the bug, please tell me and I’ll fix it up.
nice work! Id like to insert more than one instance of the carousel in my page. Do you know what alterations are required to achieve this?
nicely done.
is there a way to change the viewing angle? make the perspective looking done on it more so as to increase the overall height?
thx!