ThetaProject supports this item


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

117 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!


rkeefer Purchased

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



rkeefer Purchased

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.



zepol_ Purchased

Hi, I need your help with something. I’m trying to put different size images on the slide configuration ( I need to show only 3 images at the same time… selected one should be opacity:1 but the others should be opacity 0.6. The plugin shows me images in its real size…. dont fit in on the container.

I have two carousel at the same time, one hidden until user click some button. The hidden one is the one which is not workin… i cant show the page cause its an intranet but i can give you my config code:

container2.theta_carousel({ selectedIndex: 0, distance: 90, numberOfElementsToDisplayRight: 1, numberOfElementsToDisplayLeft: 1, designedForWidth: 942, designedForHeight: 450, distanceInFallbackMode: 300, path: { settings: { shiftZ: -230, endless: true, width: 2300, depth: 340, 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: 10 }, p3: { x: 0, y: 90 }, p4: { x: 100, y: 100 } }, xzPathBezierPoints: { p1: { x: -100, y: 50 }, p2: { x: 0, y: 0 }, p3: { x: 0, y: 0 }, p4: { x: 100, y: 50 } } }, type: ‘cubic_bezier’ }, sensitivity: 0.5, allignElementsWithPath: true, allignElementsWithPathCoefficient: -2, shadow: true, shadowBlurRadius: 180, shadowSpreadRadius: -13, fadeAway: true, fadeAwayBezierPoints: { p1: { x: 0, y: 100 }, p2: { x: 65, y: 100 }, p3: { x: 90, y: 100 }, p4: { x: 100, y: 0 } }, rotation: true, rotationBezierPoints: { p1: { x: 0, y: 0 }, p2: { x: 50, y: 0 }, p3: { x: 50, y: 0 }, p4: { x: 100, y: 10 } }, rotationVectorY: 0.3, sizeAdjustment: true, sizeAdjustmentBezierPoints: { p1: { x: 0, y: 100 }, p2: { x: 50, y: 100 }, p3: { x: 50, y: 100 }, p4: { x: 100, y: 100 } }, popoutSelected: true, popoutSelectedShiftZ: 425 });

can you help me please ? thank you so much


zepol_ Purchased

i’ve tried with another config, but images still doesnt fit to the space that i want… images are not scaling correctly… my container is inside a div with 80% width…

< div widht:80%> < div container >< div element >.... etc

now i use this

container2.theta_carousel({ “filter”: ”.show-item”, “selectedIndex”: 0, “distance”: 90, “numberOfElementsToDisplayRight”: 1, “numberOfElementsToDisplayLeft”: 1, “designedForWidth”: 1920, “designedForHeight”: 450, “distanceInFallbackMode”: 300, “path”: { “settings”: { “endless”: true, “shiftZ”: -230, “width”: 2300, “depth”: 340, “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”: 10 }, “p3”: { “x”: 0, “y”: 90 }, “p4”: { “x”: 100, “y”: 100 } }, “xzPathBezierPoints”: { “p1”: { “x”: -100, “y”: 50 }, “p2”: { “x”: 0, “y”: 0 }, “p3”: { “x”: 0, “y”: 0 }, “p4”: { “x”: 100, “y”: 50 } } }, “type”: “cubic_bezier” }, “sensitivity”: 0.5, “allignElementsWithPath”: true, “allignElementsWithPathCoefficient”: -2, “shadow”: true, “shadowBlurRadius”: 165, “shadowSpreadRadius”: -13, “fadeAway”: true, “fadeAwayBezierPoints”: { “p1”: { “x”: 0, “y”: 100 }, “p2”: { “x”: 65, “y”: 100 }, “p3”: { “x”: 90, “y”: 100 }, “p4”: { “x”: 100, “y”: 0 } }, “rotation”: true, “rotationBezierPoints”: { “p1”: { “x”: 0, “y”: 0 }, “p2”: { “x”: 50, “y”: 0 }, “p3”: { “x”: 50, “y”: 0 }, “p4”: { “x”: 100, “y”: 10 } }, “rotationVectorY”: 0.3, “sizeAdjustment”: true, “sizeAdjustmentBezierPoints”: { “p1”: { “x”: 0, “y”: 100 }, “p2”: { “x”: 30, “y”: 70 }, “p3”: { “x”: 70, “y”: 70 }, “p4”: { “x”: 100, “y”: 60 } }, “popoutSelected”: true, “popoutSelectedShiftZ”: 50 });

how can i make the images shown at the same size? images came from API and i cant change its size manually


Could you please also share a couple of screenshots, it might help.


Hi, Does it support angular 2+ versions?


No, there’s no wrapper for 2+. Only for AngularJS (



I am trying to use your carousel with something using something similar to your slideshow example. I have been playing around with the configuration but I cannot make it work for some reason. I am not sure if the problem is because the width of my container is not big enough (although I have tried to set it up to be much wider than I need), but no matter what, the elements of the slideshow are split into two different “levels”, some items showing on a Y-axis and some others in a different Y-axis. I realise you might need some example code, but I was wondering if you know of any common error that leads to this behaviour




could you please share some screenshots? It might help me better understand the problem. Also if your page is available online it also can help.


it sounds like something related to designedForWidth/Height (these properties define carousel resizing behavior) but to say more precisely I need to see the page.

zepol_ Purchased

Hi, good afternoon. I need to know if it’s posible to add arrows to control flow of the circular carousel. How can i do that? thak you so much


Please check out this example Don’t forget to add theta-carousel.min.js to scripts folder.


Is there a way to have autorotation set to true as well as be able to click through to the next slide. Right now it looks like if I have autorotation set to true, it won’t let me click through the carousel items, but if I have it set to false, then I can click through.

User interaction is blocked in autorotation mode.

But you can stop auto-rotation on mouseenter and continue on mouseleave.

Check this example for details:

please don’t forget to put theta-carousel.min.js into scripts folder


Hi , is this support for visual composer? Thanks

Hi, it’s jQuery widget, you can use it wherever you can use jQuery widgets. It doesn’t provide out of the box integration with any kind of visual composers.


Hi, I am new to JS, can you tell me which file should I add in my code to run your ellpise carousel. I’ve added theta-carousel.js.

Also can I use my own buttons to rotate the images?

Here’s my code

Which is the selector to activate your JS code?



Aoie Purchased

I did see the jQuery code of line1 example…but it seems too complicated to modify to my own…


Aoie Purchased

And I put the function in code, it disables the carousel css the images will not show as circle instead of listed vertically “function (e, data) { console.log(data.index); // selectedIndex };”


“The titles are images, so I’ll have to change the image dynamically On the API page, there is no any example that I can follow.”

Theta >> to have an image in title – just add the image into the .title element instead of text. here I added some more comments to make it more understandable

“In line1’s HTML, the div.text is at the same level as ex-item, I tried that and it made my carousel picture weird (blink image, missing for seconds…etc)”

Theta >> Yes, it should be on the same level, to include the elements in scaling. If your page is available online, I can try to figure out why is it blinking

“May I know the jQuery code for the text change? In the API for motionStart and End are not clear to me ” Theta >> we are using this jQuery API to update the text – Basically we just retrieving the text and title from an array (mapping between item index and text) and showing them inside the elements + adding classes for nice animation ”.addClass(‘animated fadeInDown’)” these classes come from animate.min.css See:

“I did see the jQuery code of line1 example…but it seems too complicated to modify to my own…” Theta >> see the link above. We can try to integrate the carousel into your page but it goes beyond the standard support package. If you are interested, please contact us and we will estimate the efforts and the price.

“And I put the function in code, it disables the carousel css the images will not show as circle instead of listed vertically “function (e, data) { console.log(data.index); // selectedIndex };””

Theta >> we need the whole script, sounds like there are some execution errors.


Is there a way to rotate slides based on a specific date with this slider? If not, will this become a feature in future update?


The carousel provides API. You can define your own logic and trigger rotation using moveTo, moveBack, and moveForward methods.


I downloaded this plugin and I’m wondering if there’s a way to add a caption to each of the images. I’d like to have my images rotating with a caption and a link. How do I set this up?


Just put the needed content into <div class=”ex-item”>...</div> tag

for example, the following HTML will display the link under the image

<div class="ex-item">
<img src="Images/1.png" />
<a href="">Title</h1>

Hello, How can i select the current Item?? Thanks!!

sounds like you need events

change, motionStart, motionEnd

if you want to change the BG of the selected item, than .theta-current-item CSS class will help you to do this. Current item is always decorated with this class. Just define it in your CSS file an it will do.


Hi again! This is what i did to change the background of the content when change the current item.

function motionEnd(e, data) { $(”.content”, document).show();

if ($('.theta-current-item',document).hasClass('bg01')) {
              $(".content", document).addClass('Background01').fadeIn();
              $(".content", document).removeClass('Background02 Background03 Background04 Background05 Background06');
          if ($('.theta-current-item',document).hasClass('bg02')) {
            $(".content", document).addClass(' Background02').fadeIn();
            $(".content", document).removeClass('Background01 Background03 Background04 Background05 Background06');
          if ($('.theta-current-item',document).hasClass('bg03')) {
            $(".content", document).addClass(' Background03').fadeIn();
            $(".content", document).removeClass('Background01 Background02 Background04 Background05 Background06');
            $("#link04").removeAttr("href", "page02.html");
          if ($('.theta-current-item',document).hasClass('bg04')) {
            $(".content", document).addClass(' Background04').fadeIn();
            $(".content", document).removeClass('Background01 Background03 Background02 Background05 Background06');
            $("#link04").attr("href", "page02.html");
          if ($('.theta-current-item',document).hasClass('bg05')) {
            $(".content", document).addClass(' Background05').fadeIn();
            $(".content", document).removeClass('Background01 Background03 Background04 Background02 Background06');
            $("#link04").removeAttr("href", "page02.html");
          if ($('.theta-current-item',document).hasClass('bg06')) {
            $(".content", document).addClass(' Background06').fadeIn();
            $(".content", document).removeClass('Background01 Background03 Background04 Background05 Background02');

thanks for help me!

You are welcome )