@{
    var _options = [];
    _options.push('bd-carousel-' + navigator.animation);
    if (navigator.verticalCarousel) {
        _options.push('bd-vertical-arrows');
    }
    if (navigator.verticalItems) {
        _options.push('bd-vertical-items');
    }
}

@function _renderIndicators() {
    <div class="@indicators.classNames @indicators.editorClass bd-slider-indicators" @(indicators.effects.dataAttrs)>
    <ol class="@indicators.indicators.classNames @indicators.indicators.editorClass" @(indicators.indicators.effects.dataAttrs)>
        @for (var i = 0; i < slides.length; i++) {
        <li><a class="@if (i === 0) { active }" href="#" data-target="#carousel-@id" data-slide-to="@i"></a></li>
        }
    </ol>
    </div>
}

<div id="carousel-@id" class="@classNames bd-slider bd-no-margins @editorClass carousel slide @_options.join(' ')" @(effects.dataAttrs)>
    @if (indicatorsWide && showIndicators) {
        @_renderIndicators()
    }

    @if (!slidesWide) {
    <div class="@containerInner">
    }

    @if (!indicatorsWide && showIndicators) {
        @_renderIndicators()
    }

    <div class="bd-slides carousel-inner">
        @include("slides")
    </div>

    @if (!navigatorWide && showCarousel) {
        @include("navigator")
    }

    @if (!slidesWide) {
    </div>
    }

    @if (navigatorWide && showCarousel){
        @include("navigator")
    }

    <script type="text/javascript">
        /* <![CDATA[ */
        if ('undefined' !== typeof initSlider) {
            initSlider(
                '@selector',
                {
                    leftButtonSelector: 'bd-left-button',
                    rightButtonSelector: 'bd-right-button',
                    navigatorSelector: '@navigator.carousel.selector',
                    indicatorsSelector: '@indicators.indicators.selector',
                    carouselInterval: @navigator._interval,
                    carouselPause: @navigator._pause,
                    carouselWrap: @navigator.wrap,
                    carouselRideOnStart: @navigator.rideOnStart
                }
            );
        }
        /* ]]> */
    </script>
</div>