Description: Fallback mode. In fallback mode carousel does not use any 3D transformations and displays all items as a plain horizontal list.
Type: String
Default: "auto"
Property Values:
"auto" Carousel automatically detects if browser support 3D transformations, and uses fallback mode if it doesn't.
"always" Always use fallback mode.
"never" Never use fallback mode.
Description: Applying path.settings.rotationAngleXY, path.settings.rotationAngleZY, path.settings.rotationAngleZX not only to rotaion path but also to element's plane.
Type: bool
Default: false
Description: The path along which the items are arranged.
Type: String
Default: "parabola"
Property Values:
"line" Line.
"parabola" Parabola.
"cubic" Cubic parabola.
"archimedes_spiral" Archimedes’ spiral.
"ellipse" Ellipse.
"cubic_bezier" Cubic Bezier curve.
Description: Bezier curve in the X-Z plane. The setting is used only if path.settings.depth is not '0'.
Type: Object
Default: { p1: { x: -100, y: 0 }, p2: { x: 0, y: 0 }, p3: { x: 0, y: 0 }, p4: { x: 100, y: 0 } }
Description: Transparency of distant items.
Type: bool
Default: false
Description: Cubic Bezier curve defines the change of transparency in the interval starting from the current one with the length defined by fadeAwayNumberOfConfigurableElements.
Type: Object
Default: { p1: { x: 0, y: 100 }, p2: { x: 50, y: 50 }, p3: { x: 50, y: 50 }, p4: { x: 100, y: 0 } }
Description: Rotation of items.
Type: bool
Default: false
Description: Cubic Bezier curve defines the change of rotation factor of the item in the interval starting from the current one with the length defined by rotationNumberOfConfigurableElements.
Type: Object
Default: { p1: { x: 0, y: 0 }, p2: { x: 50, y: 0 }, p3: { x: 50, y: 0 }, p4: { x: 100, y: 0 } }
Description: Size adjustment of the object.
Type: bool
Default: false
Description: Cubic Bezier curve defines the change of size adjustment of the item in the interval starting from the current one with the length defined by sizeAdjustmentNumberOfConfigurableElements.
Type: Object
Default: { p1: { x: 0, y: 100 }, p2: { x: 50, y: 100 }, p3: { x: 50, y: 100 }, p4: { x: 100, y: 100 } }
Description: Shift of the selected item.
Type: bool
Default: false
Starting from version 1.6.0 Theta Carousel includes AngularJS directive. To use Theta Carousel in your AngularJS App yo need:
theta-carousel-angular-directive.min.js to your code.
<script src="theta-carousel-angular-directive.min.js"></script>
theta module as a dependency to your application module.
angular.module('MyApp', ['theta'])
theta-crousel tag to your markap
<theta-crousel ng-model="controller.items"
selected-index="controller.selectedItemIndex">
<div ng-repeat="item in controller.items">
....
</div>
</theta-crousel>
The rich API allows configuring practically any aspect of the carousel behavior from visual effects to the parameters of physical model. To facilitate understanding of some complex parameters, we designed the Configurator. It allows changing any parameter of the carousel in interactive mode and see how the change effects the carousel behavior. This makes the configuration process fast, easy, intuitive and even engaging. After the carousel configuration is over, click the Get Script button to instantly get the configuration script. The Configurator is not built-in in the carousel, which eliminates the issue of downloading excessive scripts. To start the Configurator, simply run the following script in the browser console:
(function(id) {
var js, hjs = document.getElementsByTagName('script')[0];
if (document.getElementById(id)) return;
js = document.createElement('script');
js.id = id;
js.src = "https://theta-carousel.com/Scripts/boot.js";
hjs.parentNode.insertBefore(js, hjs);
}('theta-carousel-config'));
This script downloads the Configurator directly from our website. Once the Configurator is downloaded, hover over the mouse on the carousel to view the Configure button in the upper-right corner. By clicking the button, you will launch the configuration interface.