jQuery k3dCarousel plugin
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>
Pingback: new 3d Carousel method for WebME Image Transition plugin - Webworks Blog
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!
can i change the image (img) with List (LI)?
Woow , the code is simply amazing . Great job, I searched a code like this. Very neat and clean.
If possible can you post , the formula to plot the elements in a elliptic path.
hi Santhanam, it’s not a true elliptic. It’s a squashed circle. So, for example, you calculate the coordinates as if you were plotting a circle, then simply multiply the Y coordinate by a fraction (.8, .7, for example)
wow its awesome ! I never thought like this.. I gone through code, Its stunning man. Thanks for you reply . I like to follow you in twitter mine is #santhanam87 I will keep posting about my product to you…
Thank you for sharing your code.
Is there a way to have the onclick open to a lightbox vs. a new browser window? I’ve tried to apply lightbox js code, but it only seems to work in , not that your code uses.
hi have added this code to my website but already i have image slider, Api, tab menu, drop down menu, and this 3D Corousel but in all browsers its woeking fine but only in chrome its still loading can u help me out.
Hi,
It was a great slider. I’m a novice in this programming thing. I’ve followed the steps been mentioned here but i cound not get the slider running.
Is it because i wanted to have 2ns slider in a page and it doesn’t allow it?
Thank You.
Chan
Awesome job. Could you add an option to make it flowing/rotating without any pause?
Hi Kae,
I was able to implement this but i was wondering where can i get the latest verson
of this as I am looking for left/right button and On-hover over it can pause.
As mentioned in your comment above :so, the current issue list is:
1. left/right links (did not work for me at all)
2. pause on hover.
Is this issue list resolved if yes , can you please post it so we implement this and Thank you for your time and help,
I actually want to know as to why you called this article, “jQuery k3dCarousel plugin | klog”.
In any case I personally loved the article!Thanks a lot,Marcelo
how can change items number without distor the center of screen