07 Oct

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.


demo

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)

29 thoughts on “jQuery k3dCarousel plugin

  1. Pingback: new 3d Carousel method for WebME Image Transition plugin - Webworks Blog

  2. @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

  3. 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.

  4. 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?

  5. 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!

  6. 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)

  7. 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…

  8. 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.

  9. 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

  10. 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,

  11. 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

Leave a Reply to SanthanamCancel reply