ThetaProject supports this item


This author's response time can be up to 5 business days.

80 comments found.

Looking for a way to decrease the overall heights of the outermost container that holds the theta carousel, and the inner container that surrounds the actual slides, without having the slides themselves being scaled down in size, but not finding where those 2 heights (or associated margins or padding) are being controlled:

div id=”container” class=”theta-carousel” style=”various styles”

div class=”theta-carousel-inner-container” style=”various styles”

I need to do this for 2 reasons:

1) because the absolute positioning of the outer container makes it cover non-slideshow areas of the page above and below the space needed for the slides, and prevents access to the site navigation links in the page header above the slides, and copyright/site maintenance links in the page footer below the slides.

2) and I’d also like to be able to tighten up the empty spaces above and below the actual slides a bit.

Test page:

I’ve added a red border to the outer container, and a yellow border to the inner container so it’s easy to see how much of non-slide areas of the page are being overlapped.




It’s enough to set height in the style property of the “container” element. Inner container will be auto-adjusted by the carousel.

Hi, I have followed your exact instructions, but the images are not forming a carousel, neither am I getting the configure button. What could be the problem? I have attached Jquery & the theta carousel js file & copied the code from your website to activate the carousel, but it’s not working! I created a trial page & did the exact code as shown in the trial and even that didnt work.

Unfortunately, i’m working only on my localhost, so am unable to share a link to the page.

Could you please send me an archive of the page and all related files in private message. Also, you can check the “examples” folder in the redistributable package to get better understanding how to use the carousel.

Hello, Long time searched for this kind of slider. Purchased it yesterday :)

I’ve got 2 questions:

1. After a lot of struggle I noticed that the slider doesn’t work well with JQUERY3. Any plans to fix that?

2. I want to use the line-1 slider ( and use a png frame so it would look like this image I’ve uploaded- The screenshot will be within the transparent frame png image. (something like

Thanks for your quick reply! Etay

Purchase code: a962e62e-0d06-44d4-95de-cb50e417bd15

Hi we have an update regarding jQuery 3.1.0

There is a bug introduced in jQuery version 3.1.0. It affects methods “width” and “height” and cause incorrect element positioning within the carousel.

See the detailed description here:

The fix is scheduled for 3.2.0 release.

Possible workaround is to extend jQuery object with the old version of width/height methods. But then we need to keep all this code (including dependencies) within the carousel. It’ll make the carousel heavier.

So we decided not to support 3.1.0 for a while.

But if 3.1.0 compatibility is critical for you, we can issue a custom version with the patch. Please let us know if you need it.

Regards, Theta Project

Great support! I’ll stay with version 2 for now till you’ll be able to full support it completely. Will you update us in some way?

Sure, we will update you. But basically the plan is to wait for jQuery 3.2.0 and check the carousel with that release.

I hope jQuery team will release the new version soon, because the bug in measurement system is quite critical.


Hi, first congratulations for the plugin, it’s great.

I’m working on this example (with “endless” on and 2 on “Display Right”/”Display Left”) and i’ve noticed that the transition between the last and first slide (and vs) it’s different from rest, it slows down a little and behaves different.

Is there any way to remove this and make all transitions to behave equal?



thanks for the support. Let me know if you need some testing.


It should work now (v1.6.4). Could you please try again?

Thanks again for detailed repro steps!


thanks for this build. The problem is solved :)


Hello, my developer is stuck implementing the slider the way we need to. It currently displays a limited number of images (40), but we need it for an unlimited amount (like tinder has it for instance). Can you help? Regards.

The slider example of ajeeshmnmd is on (he’s my developer) Please reply back on his message so he gets the message notification. thnx

does your slider also play mp4 files?


The carousel just do a 3D positioning of your HTML elements. From carousel point of view, there is no difference what exactly is the content of the elements. It can be any HTML – images, texts, video players, etc.



manrod Purchased

Hi, I am seeing a cropping of the ellipse carousel in recently updated Chrome for Mac Version 54.0.2840.71 (64-bit) and Chrome for Win Version 54.0.2840.59 m.

I am not seeing this on Mac FF, Safari or Win Edge, IE, FF or in an older version of Chrome for Mac Version 53.0.2785.143 (64-bit).

I just checked Mac Opera. I was not seeing the cropping, but then I updated Opera, and now I am seeing the cropping. I just now installed Opera on Windows and I am seeing the cropping there also.

See this screen shot of the Theta Carousel examples page from Codecanyon on Mac Chrome (Opera looks the same):

thanks. -matt


Thanks for letting me know. Yes, I can reproduce the issue. Now looking for solution. Will keep you posted.



as a temporary workaround you can switch off the reflection. $(‘selector’).theta_carousel({ ‘reflection’: false });

Still need some time to understand why reflection gives such effect…


I would like to clarify some issues which I faced in slider. On normal page load the slider loaded 40 images . I try to append remaining 40 images through ajax call. But I couldn’t see the rest of 40 images which was appended through ajax . after ajax load , I reinitialized the image options .I couldn’t see the rest images on the end of curved slider. Here is the modified script for curved slider . var options = {selectedIndex: 0, distance: 177, numberOfElementsToDisplayRight: null, numberOfElementsToDisplayLeft: null, scaleX: 1.33, scaleZ: 2.49, path: { settings: { shiftX: 77, shiftY: 183, shiftZ: 87, rotationAngleXY: -1, rotationAngleZY: 26, rotationAngleZX: 4, wideness: 3000 } }, perspective: 636, fadeAway: true, fadeAwayNumberOfConfigurableElements: 100, fadeAwayBezierPoints: { p1: { x: 0, y: 100 }, p2: { x: 50, y: 50 }, p3: { x: 50, y: 50 }, p4: { x: 100, y: 0 } }, popoutSelected: true, popoutSelectedShiftX: -4, popoutSelectedShiftY: -10, popoutSelectedShiftZ: 30}; _________________________________________ I have provided the screenshot link of the issue I faced. Can we append more images to slider dynamically ?? Please provide clarification thank you

Yes I tried, it also works..

Thank you

Hi, Thanks for the feedback. Please help us resolve the issue mentioned below We will have to bring around thousand images together from the database to the slider. Currenly we have set as, loading a set of 40 images to overcome the lag. We are currently loading the next set of imgaes at an interval of 10 seconds. Upto almost 100 images its loading with a little lag but after that its too laggy. Please suggest a solution.


Try to use numberOfElementsToDisplayRight, numberOfElementsToDisplayLeft properties.

Set them to 20 or 30. It’ll reduce the number of the elements that are simultaneously visible on the screen. The less visible elements you you have the better browser performance you’ll get.


Hello Team,

First of all, good job on the slider.

I am using theta slider in one of my projects, most of the functionality is already baked in into the plugin. The only thing I am facing trouble with is enabling vertical scrollbar in the page to scroll through the carousel elements. The demo which I am using is ‘spiral’. This is the requirement of the project where I have to use theta carousel, is that the user should be able to navigate using page scrollbars.

Please let me know if there is any callback or events that I can utilize for this. If the functionality is not supported by the plugin then please point me to right direction, as where can I start.

Will appreciate if you can quickly respond on this, as the project timeline is really crucial.

Thank you


Scrolling by page vertical/horizontal scrollbars is not supported out of the box. Basically to achieve this you need to synchronize scrollbars with the carousel. You can do this using property “selectedIndex” and event “change”. So all index changes from the carousel you need to propagate to page scroll, and visa versa – set new selected index based on current scroll position using selectedIndex property of the carousel.

following links might be helpful:


Hi there.

Congrats on this carousel. I’m seeking to buy this product.

Could you provide the size of the entire code? So that I have an idea of data size from my final webapp..

Regards. Arthur.

Hi, thanks

The size of minified file is 42 KB, or 56KB if you want to use it with AngularJS directive.


Hi there. I just purchased your carousel plugin, I’m very happy with it. I noticed that the ellipse is designed to work with a minimum of 9 elements. That is, if you want to have a complete ellipse. How can I decrease the number of available lots on the ellipse to 5? Thanks in advance

Hi thanks, we are happy that you like it,

You have to change the Distacne between the element.

try to use 360 / [Nuber of visible elements]. So in your case it’ll be 72.



7880553 Purchased

Hi! Thank you for an awesome plugin.

I try to set ‘selectedIndex: 23’ for type: ‘archimedes_spiral’. All the parameters kept from the helper from ‘examples’. Still the gallery always starts from the 1 element, changing the index doesn’t help, if I set autorotation to ‘true’ the gallery freezes. Is this possible: 1. to start from ‘not first’ index 2. autorotate ‘archimedes_spiral’

Thank you!

Hi, thanks,

try to use the following initialization script in example container.theta_carousel({ "filter": ".ex-item", "selectedIndex": 23, "distance": 44, "numberOfElementsToDisplayRight": 4, "numberOfElementsToDisplayLeft": 10, "designedForWidth": 1600, "designedForHeight": 705, "distanceInFallbackMode": 350, "scaleX": 3.14, "scaleY": 1.18, "scaleZ": 1.06, "path": { "settings": { "shiftX": 24, "shiftZ": -1422, "fi": 2, "endless": true }, "type": "archimedes_spiral" }, "autorotation": true, "perspective": 1460, "mode3D": "scale", "rotationAnimationEasing": "easeInQuad", "sensitivity": -0.2, "shadow": true, "shadowBlurRadius": 108, "shadowSpreadRadius": -29, "fadeAway": true, "fadeAwayNumberOfConfigurableElements": 10, "fadeAwayBezierPoints": { "p1": { "x": 0, "y": 100 }, "p2": { "x": 68, "y": 99 }, "p3": { "x": 97, "y": 74 }, "p4": { "x": 100, "y": 14 } }, "popoutSelected": true, "popoutSelectedShiftX": -63, "popoutSelectedShiftY": -26, "popoutSelectedShiftZ": 447 });

It makes sense to use auto-rotation only with endless mode (, in other case autorotation will just stop once it gets to the first/last element.

Also please take into account that index is zero based, so if you set 24 you’ll actually get 23td element.



7880553 Purchased

Thank you for the fast reply! Defining the class in filter parameter helped.

Hi, Do you do freelancing work too? We need a custom carousel built. Please email me at so I can explain exactly what we’re looking for.

Thanks, Adam

Hi Adam,

I have replied to your private message,


I have a question before you buy: – how to at this carousel to make a loop? ==== translated from Russian ====> У меня вопрос перед покупкой: – как можно у этой карусели сделать зацикливание?


Click “Configure” button (right top corner) or “See more..” (right bottom corner) , go to Path tab, and click Endless button.

Нажмите кнопку “Configure” (правый верхний угол) или “See more..” (правый нижний угол), перейдите на вкладку Path, и нажмите кнопку Endless.


Ok, thanks!!!!

Hi I am trying to implement the slider over a project, but the slider is not working properly. The image size is too small and it’s not, also it’s not showing images from y direction. You can see the slider around the building structure as we need to show the directions.

link –

Just switch off click event for the carousel items


Carousel should already be initialised

Hey thanks. Best support ever.

You are always welcome :)

We would appreciate it if you rate the item.

Best regards,

Hi, Can we close the resizing of elements in parabola shape? Means the scale of the elements will be remains same for all elements.


No, you can’t switch off the image scaling. But you can make your 3D space very shallow (almost 2D) and reduce the effect of scaling.

For that purpose you can use “Cubic Bezier” path type – it has three bezier curves the first one describes 2D path of the carousel, second – items dancity accross the path third – items positioning in 3D space

try the following settings object with the same example: { selectedIndex: 8, distance: 65, numberOfElementsToDisplayRight: 4, numberOfElementsToDisplayLeft: 4, perspective: 10000, path: { type: 'cubic_bezier', settings: { depth: 10, xyPathBezierPoints: { p1: { x: -100, y: 0 }, p2: { x: 0, y: 0 }, p3: { x: 0, y: 0 }, p4: { x: 100, y: 0 } }, xyArcLengthBezierPoints: { p1: { x: 0, y: 0 }, p2: { x: 100, y: 28 }, p3: { x: 0, y: 73 }, p4: { x: 100, y: 100 } }, xzPathBezierPoints: { p1: { x: -100, y: 0 }, p2: { x: -4, y: -13 }, p3: { x: 3, y: -13 }, p4: { x: 100, y: 0 } } } }, popoutSelected: true, popoutSelectedShiftZ: -32 } it looks similar to parabolic shape, except positioning across Z axis


Hi, You make the best carousel 3D throughout the web. I just purchased your Theta Carousel 3D, I’m very happy with it. I need help,Do you do freelancing work too? Please email me at so I can explain exactly what we’re looking for.

Best greetings from Germany R. wALTER

Hi Walter,

Thanks for such a nice feedback.

I have replied to your email.


Hi, is there any way to limit display items.

I would like to rotated continually was moving about one item and it was visible up to 5.

Something like this

Scale y – 0 is ok.. but I would like display 5 wihout items in background.

Right, there is no such feature out of the box.

Hi, I set display left right 2 items. When new item is showing its animate but when hiding there is no animation… How can I fix this?


Try to switch off “Fade Away” effect.

fadeAway: false


hi, i just ask you if your slider can be used in prestashop 1.6 and if you can me a tutorial how insert in my site-prestashop. Thank you

Hi Sorry, I’m not an expert at prestashop. You can use the carousel as long as you can attach custom JavaScript files to the page and have a control on you HTML output. We also do not provide any tutorial for prestashop integration. Please check out our Help Page to see how to add the Carousel to normal HTML page, and than check if the same is applicable for prestashop.


Hi, could you please help me with this error message?

example.js:21 Uncaught TypeError: Cannot read property ‘caption’ of undefined at n.fn.init.motionEnd (example.js:21) at n.fn.init.carouselCreated (example.js:26) at HTMLDocument.<anonymous> (example.js:190) at i (jquery-1.12.0.min.js:2) at Object.fireWith [as resolveWith] (jquery-1.12.0.min.js:2) at Function.ready (jquery-1.12.0.min.js:2) at HTMLDocument.K (jquery-1.12.0.min.js:2)

The problem happens because “data.index” is an object then “data.index % promoTexts.length” return NaN in motionEnd method:

function motionEnd(e, data) { }

var promo = promoTexts[data.index % promoTexts.length];
$(".title, .description", this).show();
$(".title", this).text(promo.caption).addClass('animated fadeInRight');
$(".description", this).text(promo.description).addClass('animated fadeInLeft');

I’m trying to run bezier-2 example inside a page I’m coding who already has some jquery and bootstrap running. I ttried a lot of things but I’m still struggling with this. Any help is welcome, congratulations for the amazing carousel!

Please nevermind, problem solved!


thanks for letting us know


Hi. Talking about “bezier-2” example, how can I perfectly associate a “promoTexts” caption and description for each image? I put everything sequentially but the carousel displays it mixed.


The number of items in promoTexts array should be the same as the number of images in your carousel.


Actually it’s just one way how to associate some meta info (in this case captions) with your carousel items

The key point here is data.index which is the index of currently selected item. Now based on this index you need to provide the caption that you want to display. I just took one of the items from promoTexts array. You can also put it as a data ( right into you item’s html code, for example.

Because i had just 3 items in promo text and 39 items i used % operator to make sure that I will not go out of the bounds of my 3 elements array.

So when the first element is selected you’ll get the first caption for the third one – because 3%3 = 0 you again get the first caption

to avoid that number of captions should be the same as a number of elements


Hi. Problem solved! Yes I notice the logic on the line

var promo = promoTexts[data.index % promoTexts.length];

I changed it to

var promo = promoTexts[data.index];

But some captions kept mixed up so I wrote to you, but now I found out the problem was some new line characters in some of them. Removing them solved the problem, thank you for the quick answer!