Discussion on CodingJack's 3D Carousel


CodingJack does not currently provide support for this item.

96 comments found.


Before I purchase I have a couple of questions:

What are the markup requirements for using this? Can I customize the markup IDs and classes used?

Also, can the slides be nested several levels within their parent instead of being direct children? I’m using a CMS and don’t have full control of the markup.


Hi gtothab,

You could customize the classes and id’s but you’d also have to alter the CSS and JS files to reflect those changes. But I wouldn’t recommend the plugin if you don’t have the ability to enter pure HTML into your CMS.



i try to use just 6 images in the slider but the over function doesnt work anymore. If i put another image into the slider it works again. So is there a minimum of images required?


Hi mygrd,

Definitely not a minimum. Send me a link to an example from my profile page and I’ll take a look.


Am I missing a plug-in or something? I only see three small icons in my browser, and only in 2D. I am using win8, but the desktop browser. Niklas

Hi Niklas,

IE10 doesn’t support the “preserve-3d” value for CSS3’s “transform-style” property which is necessary for the carousel to work, so IE10 falls back to the static grid instead.


Hey there, great plug-in! Just had one question that I may end up answering myself before you get a chance to play with it, but I figure I might as well ask..

Given that as far as z-index is concerned the slider’s container is all on the same z-index point, how would you go about inserting a div ‘barrier’ between the front and back slides as they rotate around? (Like a div that covers up the far, backwards items as it rotates so the only slides you see are the ones facing front and they disappear into or behind the barrier as they turn.)

Its essentially something like THIS:

Tried using that site’s roundabout plugin – but the way they handle dragging and touch setup is bloody awful on mobile and it jumps slides when you utilize their drag on mobile too, so I’ve been trying to mod your slider to do the same thing theirs does, but more in line with the style of your slider’s rotation.

(Btw, future idea too – make it so you can lock the tilt so it will maintain the curve of the slides instead of rotating the curve) Thanks! Sorry for so much text haha

Hi lux-capacitor,

I once did this in Flash but all my efforts in CSS3 were unsuccessful. The reason why it works for the roundabout is because that doesn’t use real 3D.


Lol actually figured out if you just set the rotateX parameter to 50 on the scripting data declarations at the top, and then set a class that tilts the slides back vertically at like… -moz-transform:rotateX(-40deg); ...I can shift this into the shape I’m going for. Hackasarus Sexy. Thanks for the plug-in sir!!

Cool, so nothing ever overlaps right? Sounds like a great solution :)

Hi. I just purchased it. How can I make it wider and looking more like an oval? I also have problems with my other jQuery scripts once I add 1.9.0 line to the header. It doesn’t want to work with 1.7.1… Is it difficult to make this script compatible with jQuery 1.7.1?

Hi enki1,

This is a CSS3D carousel so it won’t work on IE9. And even though IE10 support some parts of CSS3D, it doesn’t support “transform-style: preserve-3d” which is vital to the carousel working correctly. So all current versions of IE will display the fallback grid. When (or if) IE10 updates their browser to support preserve-3d I’ll update the item.

This information is explained in the item’s description here. At the very top there’s a short description of what browser’s are supported and what browsers the fallback grid will be used for, and at the bottom in the special notes there’s a more elaborate explanation about IE10.


Then I misunderstood your description. What is the point of having this carousel on any website if it doesn’t work on IE.

I’m sorry you didn’t understand this but to my defense I do make a strong effort to relay this information at the very top of the description:

CodingJack’s 3D Carousel

  • Real 3D using CSS3 3D Transforms
  • Works on Chrome, Firefox, Safari, iOS and Android
  • Graceful grid style fallback for Opera and IE

Because of this, there’s no question the carousel isn’t for everyone. CSS3 3D is fairly new technology and although some browsers offer adequate support, others don’t.

Are there Install instructions for wordpress, for this?

I purchased this thinking it was a wordpress plugin. (might have been my bad)

Any help would be appreciated@

Any basic guidelines or ideas would be help. Our a point in direction?

Just looking to add this to 1 page as a php or html file type.

Sure. First the scripts and css files would need to be added to your theme’s “header.php” file, and then you’d need to find a way to inject the html markup in one of the pages. Problem with that is the WordPress content editor is notorious for messing with raw markup so you might have to create a custom php file for the page and insert the markup there. But that’s where things start to get theme-specific.

Another thing you could do is load it as an iframe which would avoid the laborious steps above. But the fallback grid is designed to be responsive so the iframe would have to be made responsive as well for it to appear correctly.


Hi Jack,

I have found a little buglet in the code :(

The site is ‘responsive’, so width is set to 100% for the fallback.

Columns set to 4.

IE9 & Opera – if you reduce the width of the browser, when the images wrap, the first two rows overlap, the rest are ok.

Yours Roy

Hi Roy,

For desktop browsers, the fallback grid isn’t meant to update when the browser resizes. That behaviour is reserved for mobile devices only.


Hi Jack,

Ah, I see now, it works for all screen sizes, it just doesn’t refresh when the screen is resized.

That’s ok then :)

Great script btw :)

Yours Roy

i recently purchase this package but it does not working in opera and grome

any setting i should do

Hi ngbh001,

Do you mean Chrome and do you mean Chrome for desktops? If it’s not working there it means you have a really old version of Chrome. Update the browser and it will work. If your question is for Chrome on IOS or Chrome on Android, the carousel will work in these browsers if the “smartphonesUseFallback” setting is set to “false”.

The plugin will display the fallback grid for Opera and IE. Check out the item’s description page for more information:


Hi ngbh001,

Please review the support details on my profile page here if you’d like further support:



Love the plugin! However I can’t view my icons on an iPad? Any ideas where I’m going wrong? [link removed]

Thanks, Chantelle

Hi Chantelle,

Writing this message from my iPad where I just viewed that link and the carousel is working correctly (great implementation btw). If you’re still having trouble, check out my support policy here:


Weird! Thanks for checking it out. I’ve just had a look and all is fine. I’m blaming pregnancy hormones LOL! :D

Would it be ok to run this and the zoom showcase in the same page?

Since carousel doesn’t work IE

I was going to use a conditional statement to load one or the other based on the Browser type.

Hi Nimo,

You mean you’d like to display something other than the grid fallback for IE?

The ZoomShowcase and Carousel can both be loaded into a page, but if you want to swap them out depending on the browser it’s going to take some advanced JavaScript work as opposed to just a conditional statement.


Yeah I was looking for a secondary option in place of the IE fallback. I am doing this in WP, but not really up for adding some advanced Java script.

You have another quick thought on this?

Hey! Great item! I made my site’s main menu of this!

I’ve just noticed that it shows very weird in Maxthon instead of falling back to simple layout. Not that many people use this browser but I thought you should know.

Hi protnet,

Thanks for the information. I only support the usual list of major browsers.


Hi CodingJack, great script!

One question – is there any way that we can change the text/caption to display in a seperate div rather than over the image, we have quite long caption for images so it would be great if there was an option/way to send the text to a div under the carousel for instance?


Hi Wex,

This functionality isn’t built in but I could add it for you as freelance work if you like. Feel free to email me from my profile page for more information.



Would it be possible to have the captions go to the bottom? I’m going to use it with translucent caption box, and because of that I’m trying to replicate 3d carousel as much as possible.

I haven’t found anything about the captions being able to moved in the documentation, so please, if it can be done, let me know how. Also, even for additional money, would it be possible to have the captions automatically up ONLY when the main, closest carousel item is facing the camera? And I would not mind having the ability to adjust the size of the caption box, OUTSIDE the given width of the slide (i am using 100×140 items, and there is plenty of space to have the caption reach 150-200 lenght even (given that it can be at the bottom as requested). Please check this: [link removed]

I’m willing to pay more, if you can implement these 2 things. It’ll make the carousel a lot more refined.

Thanks in advance,


Hi David,

I flagged your message because of the link but no worries. Send me an email from my profile page and I might be able to help you out.


Oh excuse me :) That is a really old old old plugin I linked, so I never thought It might violate anything. I’m emailing you right now.

Just wrote you back :)

Troubleshooting here.

So I have other pc’s & people that have display/action issues. Mine works fine, but others have issues where the carousel only rotates one way and/or it rotates slower. I have done a side by side comparison and have checked the operating software (XP/WIN 7, etc.) and so on. I can’t figure out why there are issues. (I.E., Mozilla, Chrome)

I checked the versions of all Java, Win Updates and so on, but there still is little glitchy issues as mentioned.

Any insight on what may be causing this. I am not referring to the fall back of I.E either.

Any insight is appreciated!



[link removed]

You can check that out and let me know if you need any further assistance.


C, Jack

Hi Nimo,

I flagged your message because of the live link but no worries. If you want to send me any links in the future, just send them to me from the form on my profile page.

I viewed your example and didn’t notice anything strange. But if there’s an error that can be produced, send me an email from my profile page with specific instructions on how it can be produced. These instructions would be something like: “Error can be produced by viewing example in Chrome on Windows 7”, etc.


Sent you an email.

ii would like to ask about the update for the IE grid fallback is this the solution to display the 3d carsoul into IE ? beacuse i did download it again and no updates !

Hi ai_elhakim,

The carousel still uses the grid-fallback for all versions of IE, and the update was for IE10 grid-fallback compatibility.

As soon as IE10 adds support for nested 3D elements, I’ll update the plugin.


i wanna purchase this, but its not working properly in chrome in XP, its working fine in chrome, win7. also working in a different way in I.E, can u please help

Hi herman,

My guess is Google doesn’t bother with Windows XP anymore. Otherwise they’d update Chrome to work the same as it does with Windows Vista, 7 and 8. I would never sniff for an operating system so I can’t really help.


greet work!!

just one question…how to make it open in “_top”?

thank you in advance


Hi Sandroo,

Do you mean you’d like to open a link in the same window? The “_parent” option will work for that.


i am calling the carousel from an iframe. _parent, _top are not working. they are still opening in the iframe.

Hi Sandroo,

In this case the script needs to be adjusted. Inside the file “js/jquery.cj-carousel.js”, around line #457 you should see a function named “gotoURL”. Inside this function, change:$this.attr("data-url"));

to this:

parent.location = $this.attr("data-url");


Awesome plug-in. Looking to buy but have a few questions.

I tested the live preview on an Ipad and found that the pop up text does not show up, unless clicked. Is there an alternative or something to show some text to describe the slides? Would be great if the text would pop up on touch.

Looking to put animated gifs on the slides for awesomeness. Would it take it? Speed and performance is not a concern as I will tweak the gif quality to compensate.


Hi Havoc,

There’s an option to always show captions. As far as animated gifs, the carousel uses HTML5 to draw the images so only static images are supported.


Quick response! Thanks