Binding to Bootstrap Carousrel widget

Examples

With default templates and options:

Html markup

<div data-bind="carousel: { content: { data: itemsFirst } }"></div>

View model

function CarouselExampleViewModel() {
    // ...

    self.itemsFirst = ko.observableArray([
        {
            src: 'holder.js/900x200/text:First image',
            alt: 'First image',
            content: 'First caption'
        }, {
            src: 'holder.js/900x200/text:Second image',
            alt: 'Second image',
            content: 'Second caption'
        }, {
            src: 'holder.js/900x200/text:Third image',
            alt: 'Third image',
            content: 'Third caption'
        }
    ]);
}

Carousel with custom item template:

Html markup

<div data-bind="carousel: { content: { name: 'carouselItemTemplate', data: itemsSecond } }"></div>
            
<script type="text/html" id="Script1">
    <h4 data-bind="text: primary"></h4>
    <p data-bind="text: secondary"></p>
</script>

View model

function CarouselExampleViewModel() {
    // ...

    self.itemsSecond = ko.observableArray([
        {
            src: 'holder.js/900x270/text:First image',
            alt: 'First image',
            primary: 'First caption',
            secondary: 'First subcaption'
        }, {
            src: 'holder.js/900x270/text:Second image',
            alt: 'Second image',
            primary: 'Second caption',
            secondary: 'Second subcaption'
        }, {
            src: 'holder.js/900x270/text:Third image',
            alt: 'Third image',
            primary: 'Third caption',
            secondary: 'Third subcaption'
        }
    ]);
}

Options

data-bind="carousel: { id: id, options: options, content: content, indicators: indicators, controls: controls }"

id

Type: string, can be observable

Id of carousel. It will be ignored, if carousel has id attribute. If there is no id attribute and id option is not specified, id will be generated.
options

Type: object, can be observable

Bootstrap options for carousel. Please, see Bootstrap documentation.
content

Type: object, can be observable

Template binding for single carousel item, uses options from Knockout template binding. Please, see Knockout documentation for details.

Default values of item template:
- name
  
  Type: string, can be observable (default: 'carouselContent')
  
  Name of single item temlate for carousel. Default template:
```
<div data-bind="text: content"></div>
```
- data
  
  Type: array, can be observable
  
  Items for carousel. Each item will be passed to content template. Each item should contains src, altproperties. For default template item should contain content property.
- converter
  
  Type: function
  
  Function, which applies for each item and returning data object for template. Default function just return item itself.
indicators

Type: object, can be observable

Template binding for carousel indicators, uses options from Knockout template binding. Please, see Knockout documentation for details.

Default values of indicators object:
- name
  
  Type: string, can be observable (default: 'carouselIndicators')
  
  Name of controls temlate for carousel. Default template:
```
<ol class="carousel-indicators" data-bind="foreach: items">
    <li data-bind="attr: { 'data-target': $parent.id, 'data-slide-to': $index }"></li>
</ol>
```
- data
  
  Type: object, can be observable
  
  Data for indicators template. For default template, it should contains id and items properties.
- dataConverter
  
  Type: function
  
  Function, which creates data object for indicators template. Accepts binding value as parameter. Will be ignored, if data property is specified. Default function:
```
function(value) {
    return {
        id: ko.computed(function() {
            return '#' + ko.unwrap(value.id);
        }),
                    
        items: value.content.data
    };
}
```
controls

Type: object, can be observable

Template binding for carousel controls, uses options from Knockout template binding. Please, see Knockout documentation for details.

Default values of controls object:
- name
  
  Type: string, can be observable (default: 'carouselControls')
  
  Name of controls temlate for carousel. Default template:
```
<a class="left carousel-control" data-bind="attr: { href: id }" data-slide="prev">
    <span class="icon-prev"></span>
</a>
<a class="right carousel-control" data-bind="attr: { href: id }" data-slide="next">
    <span class="icon-next"></span>
</a>
```
- data
  
  Type: object, can be observable
  
  Data for controls template. For default template, it should contains id property.
- dataConverter
  
  Type: function
  
  Function, which creates data object for controls template. Accepts binding value as parameter. Will be ignored, if data property is specified. Default function:
```
function(value) {
    return {
        id: ko.computed(function() {
            return '#' + ko.unwrap(value.id);
        })
    };
}
```

Default values

Default values for carousel binding located in ko.bindingHandlers.carousel.defaults object. It contains default css for root element of carousel and default values for controls, indicators and item templtates. Can be changed before ko.applyBindigs() is called.

defaults: {
    css: 'carousel slide',

    controlsTemplate: {
        name: 'carouselControls',
        templateEngine: ko.stringTemplateEngine.instance,
        dataConverter: function(value) {
            return {
                id: ko.computed(function() {
                    return '#' + ko.unwrap(value.id);
                })
            };
        }
    },
        
    indicatorsTemplate: {
        name: 'carouselIndicators',
        templateEngine: ko.stringTemplateEngine.instance,
        dataConverter: function(value) {
            return {
                id: ko.computed(function() {
                    return '#' + ko.unwrap(value.id);
                }),
                    
                items: value.content.data
            };
        }
    }, 
        
    itemTemplate: {
        name: 'carouselContent',
        templateEngine: ko.stringTemplateEngine.instance,

        converter: function (item) {
            return item;
        }
    }
}