Initializing Carousel on a Page

Carousel source files

First, you need to include carousel js/css files on a page. In order to use dhtmlxCarousel as a separate component, you need to include its source files on the page. There are two source files you should use:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxcarousel.css">
    <script src="codebase/dhtmlxcarousel.js"></script>
</head>

But if you're working with the whole DHTMLX Suite, there's no need to include extra files - dhtmlx js/css files will be enough:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
    <script src="codebase/dhtmlx.js"></script>
</head>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Constructor

Then you can initialize Carousel object. For this purpose, you need to define a parent container on your page.

Assuming that we already have one:

<body>
    <div id="carouselObj" style="position: relative; width: 430px; height: 520px;">
        <!-- carousel body will be here later -->
    </div>
</body>

So you can init carousel by using the script below:

// init new instance
var myCarousel = new dhtmlXCarousel("carouselObj"); // parentId, animType, skin
// define cells dimension
myCarousel.setCellSize(290, 340); // width, height
// define offsets
myCarousel.setOffset(30, 15, 45); // top, left, item

By default, the "slide" animation type is set. You can redefine it by specifying the 2nd param. Possible values are: "slide", "flip", "cards".

The same statements are true for skin. It is detected automatically, but if you have several css included on your page, the skin from the last css file will be used. To manually specify the skin, please use the 3rd param.

Or using object API init:

var myCarousel = new dhtmlXCarousel({   
    parent:         "carouselObj",  // id/object,a parent container for carousel 
    skin:           "dhx_skyblue",  // string,carousel's skin, optional
    item_width:     "auto",         // string,width of attached item,"auto" by default
    item_height:    "auto",         // string,height of attached item,"auto" by default
    offset_left:    30,             // number,offset between cell and left/right edges
    offset_top:     15,             // number,offset between cell and top/bottom edges
    offset_item:    45              // number,offset between two nearest cells
    touch_scroll:   true            // boolean,true to enable scrolling cells by touch
});

Then add cells:

// with auto generated id
var id = myCarousel.addCell();
myCarousel.cells(id).attachComponent();
 
// or if you already know the id
myCarousel.addCell(id);
myCarousel.cells(id).attachComponent();

Full-screen init

Generally, to create a full-screen Carousel on a page, use the code as in:

<html>
<head>
<style>    /* it's important to set width/height to 100% for fullscreen init */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
    }
</style>
<script>    var myCarousel;
    function doOnLoad() {
        myAcc = new dhtmlXCarousel({
            parent: document.body,  // parent container
            // config here              
        });
    }
</script>
</head>
<body onload="doOnLoad();">
 
</body>
</html>

You can set offsets for Carousel in the full screen mode.

Init in an HTML element

It's easy to initialize dhtmlxCarousel in an HTML element by completing the steps below:

1) create an HTML element where the carousel will be placed later, don't forget to specify its width and height:

<div id="carouselObj" style="position: relative; width: 360px; height: 400px;"></div>

The height and width of the container can't be set in percentage, they are specified in pixels only.

2) create a dhtmlxCarousel object and place it into the HTML object that you've just created:

var myCarousel = new dhtmlXCarousel({
    parent: "carouselObj",  // id or object for parent container
    // config here      
});
//or
var myCarousel = new dhtmlXCarousel({
    parent: document.getElementById("carouselObj"),
    // config here  
});

Init in a window

To create a carousel in a window, do the following:

1) create a dhtmlxWindows object:

var dhxWins = new dhtmlXWindows();
var myWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

w1 - the id of the window;
20, 20 - the left and the top positions of the window;
600, 400 - the width and the height of the window.

2) call the attachCarousel method to render a carousel in the window:

var myCarousel = new myWin.attachCarousel();
// or using a more extended config
var myCarousel = new myWin.attachCarousel({
    // config here
});

Init in a cell of layout

To create a new carousel in a cell of a layout, do the following:

1) create a dhtmlXLayoutObject object:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach carousel to a cell of the layout with the attachAccordion method:

var myCarousel = myLayout.cells("a").attachCarousel();
// or using a more extended config
var myCarousel = myLayout.cells("a").attachCarousel({
    // config here
});

Recommended init way

<html>
<head>
<script>    var myCarousel;
    function doOnLoad() {
        myCarousel = new dhtmlXCarousel({
            // config here
        });
    }
</script>
</head>
<body onload="doOnLoad();">
 
</body>
</html>