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. that’s pretty awesome!

  3. Great work. Can you include left and right navigation button?

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

  5. great job..! i’ll try this for prestashop module..! it may be works.

  6. Thanks. Looking forward to your final release.

  7. Awesome… i will put this effect to my web… btw, how i can stop the rotation when i mouse over it…

    thanks

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

  9. All three of the above issues have been addressed. See here for more.

  10. Thanks for your new release –> k3dCarousel-1.2

  11. Alexandre SAntos on November 1, 2010 at 6:12 pm said:

    Thanks man….. this a great plugin!

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

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

    • Kae Verens on March 18, 2011 at 4:29 pm said:

      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.

  14. eekamouse on April 15, 2011 at 10:16 am said:

    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?

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

  16. can i change the image (img) with List (LI)?

  17. Santhanam on June 27, 2012 at 5:14 pm said:

    Woow , the code is simply amazing . Great job, I searched a code like this. Very neat and clean.

  18. Santhanam on June 27, 2012 at 5:39 pm said:

    If possible can you post , the formula to plot the elements in a elliptic path.

  19. Kae Verens on June 27, 2012 at 6:27 pm said:

    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)

  20. Santhanam on June 30, 2012 at 9:36 am said:

    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…

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

  22. karthikeyan on September 6, 2012 at 1:38 pm said:

    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.

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

  24. Peter on March 7, 2013 at 12:09 pm said:

    Awesome job. Could you add an option to make it flowing/rotating without any pause?

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

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

  27. omar colin on November 26, 2013 at 8:34 pm said:

    how can change items number without distor the center of screen

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation