Buy Now See More

Examples

Watch a Quick Demo

Features

Theta Carousel Configurator

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 jQuery Script" button to instantly get the configuration script, or "Get AngularJS Tag" to get carousel tag that you can use in your AngularJS application. 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 = "http://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.

Adding Carousel to a Web page

The carousel has been designed as a jQuery plug-in. Thus, to add it to a Web page is as easy as any other plug-in.

$('selector').theta_carousel({ /*options*/ });

Adding Carousel to AngularJS application

We are also providing AngularJS directive for our component. Just add it to your markup and enjoy fancy looking and flexible carousel in your AngularJS application.

<theta-crousel ng-model="controller.items"
    selected-index="controller.selectedItemIndex">
        <div ng-repeat="item in controller.items">
            ....
        </div>
</theta-crousel>