ThetaProject supports this item


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

107 comments found.

I’m using the carousel as in this example:

In my app, you click a button and “spin” the carousel. I first change it to autorotation: true and then after a time, I use the moveTo() function to select a certain item. My problem is that in using moveTo, it calculates the closest way to rotate, which is sometimes the opposite direction of the spinning and it looks bad.

How do I force the moveTo() function to only move in a certain direction?


Here is the code for most of the app:

Specifically, if you look at the function $spinClick() there is the setTimeout which removes autorotation and then does a moveTo.

What it is designed to do is this: 1- you click the Spin button 2- the carousel spins for about 1 second and then lands on a predetermined item.

So when moving to the predetermined item, I want the spinning motion to look natural and seamless.

If there is a workaround that involves adding a function to my app.js here, that would be fine too.

Thanks very much! -J


Please try the following example:

Use moveToAndStopRotation(index) in browser console to see how it works.

I just speeding up the autorotation, till the carousel gets to the item that I need, and then I stop it. So it is similar to GoTo except the rotation direction is always the same.

Don’t forget to put theta-carousel.min.js into the Scripts folder.


Thanks very much for this- it worked great!

Great plugin!

Issue: When clicking anywhere within the carousel container for the first time after page load, the page jumps. It only happens on the first click.

Environment: Mac Chrome, Mac Safari. Interestingly it is not happening in Mac Firefox.

Any idea what might be causing this to happen on my site?

See here: When prompted to login, use this: vot / jeremy2017

Add the following line of code at the end of buildCarousel function (viewpoints.js)


Line 416


Thank you for the extremely fast reply. I’ve added that line of code and modified the height settings and the jumpy behavior is gone.

my pleasure

If you like the carousel could you please leave 5 stars for us?


Dear Sir,

my name is Marco from Berlin. I was looking for a different option to show content to my website audit. I´ve found your offer and I thought yes that looks like what I need. I downloaded after buying and I´ve followed your instruction by video. Unfortnunally, at a mobile inquiry the view is very small and actually you need a zoom. For me is very important to find a solution to get the step in the future right. (Mobile first) Do yo have any solution getting the images bigger without distroying the base idear of your nice carousel?

Kindly regards Marco

Maybe you can share some screen-recording video?

Thank´s for your help. Yesterday, the CEO and the developer team tryed to find a solution but it didnt success. Sorry it is a nice rebirth of the carousel but please we would like to launch a ticket for a refund. What do you need? What we have to do? Kindly, regards Marco


This article describes how to request the refund:

I can’t trigger the refund by myself (and I think the approval from Help Team will be needed), but I’ll give my approval if it is required.


Hi Author,

Great Plugin. I’m using We don’t want the text, I have removed the variables, text and events related to that. But the slider width remains same, I want it to make it full width to the page.

How can we do that? Please help.


Try to use the following settings:

container.theta_carousel( { distance: 160, numberOfElementsToDisplayRight: 6, numberOfElementsToDisplayLeft: 0, designedForWidth: 1600, designedForHeight: 660, distanceInFallbackMode: 350, scaleX: 1.47, scaleZ: 0.72, path: { settings: { shiftX: 12, shiftZ: 194, rotationAngleZX: -60 }, type: ‘line’ }, perspective: 351, sensitivity: 0.7, shadow: true, shadowBlurRadius: 82, shadowSpreadRadius: -16, sizeAdjustment: true, sizeAdjustmentNumberOfConfigurableElements: 7, sizeAdjustmentBezierPoints: { p1: { x: 0, y: 100 }, p2: { x: 58, y: 94 }, p3: { x: 72, y: 85 }, p4: { x: 100, y: 55 } }, popoutSelected: true, popoutSelectedShiftX: 7 });

Is it something similar to what you wanted to achieve? If not, you also can try to change the configuration with the help of our configurator –

See the help page for more details


Can you provide an example where you are adding and removing items from the carousel with an add and remove button or something similar ? I’m looping through an array and generating the items for the carousel – works fine. I would like to delete or add items to the array and then update the carousel in place. (without refreshing the entire page) . I don’t see any examples in the downloads or your website but I do see an update method.


I created a small example, please see it bellow:

Don’t forget to add theta-carousel.min.js into the Scripts folder.


Is there a way to set autoRotation to true and allow it to gradually change speed as it spins?

It seems that you have to set the speed before the autoRotation starts, and that changing the speed while autoRotation is doing its thing doesn’t affect anything.

You can not change the speed while rotation is in the middle betwen two elements. New speed will be applied only for the next rotation.

for example if you have three elements in carousel, and you are changing the speed when the carousel in the middle between 1 and 2 the the new speed will be taken for the next animation – between 2 and 3. You can not change animation speed if it is in progress.



how to display your ‘panel carousel setting” like in your demo ? I downloaded your archive but I don’t see this panel…

Thanks for help.

In fact, I can get jquerry script in your demo (carousel setting) but where to put the code in your examples files ? Same thing with AngularJS tag ?

Thanks for help

Also, in your example, is possible to create custom link for each slide ?


Right, you should use that script to initialize the carousel. There is example.js for every example, just replace the settings in this file. See the link below:

AngularJS tag is applicable only if you have angular application. It’ll not work without Angular JS. If you have Angular JS app, then just put this tag into your HTML. See AngularJS folder as an example.

Yes, you can add custom link for each slide, to do this you should modify the content of ...........

tags. You can put there the links, which you want to display within your carousel items.

Hope it will help.