Carousel

Twitter bootstrap Documentation

Example

Twitter bootstrap Documentation

Slides only

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->carousel(
    [
        [
            'src' => '/twbs-helper-module/img/docs/slide1.svg',
            'active' => true,
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide2.svg',
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide3.svg',
            'alt' => '...',
        ],
    ],
    ['id' => 'carouselExampleSlidesOnly'],
);

With controls

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->carousel(
    [
        [
            'src' => '/twbs-helper-module/img/docs/slide1.svg',
            'active' => true,
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide2.svg',
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide3.svg',
            'alt' => '...',
        ],
    ],
    ['id' => 'carouselExampleControls', 'controls' => true],
);

With indicators

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->carousel(
    [
        [
            'src' => '/twbs-helper-module/img/docs/slide1.svg',
            'active' => true,
            'alt' => '...',
            'indicator' => 'Slide 1',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide2.svg',
            'alt' => '...',
            'indicator' => 'Slide 2',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide3.svg',
            'alt' => '...',
            'indicator' => 'Slide 3',
        ],
    ],
    ['id' => 'carouselExampleIndicators', 'controls' => true],
);

With captions

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->carousel(
    [
        [
            'src' => '/twbs-helper-module/img/docs/slide1.svg',
            'active' => true,
            'alt' => '...',
            'indicator' => 'Slide 1',
            'caption' => [
                'title' => 'First slide label',
                'text' => 'Some representative placeholder content for the first slide.',
            ],
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide2.svg',
            'alt' => '...',
            'indicator' => 'Slide 2',
            'caption' => [
                'title' => 'Second slide label',
                'text' => 'Some representative placeholder content for the second slide.',
            ],
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide3.svg',
            'alt' => '...',
            'indicator' => 'Slide 3',
            'caption' => [
                'title' => 'Third slide label',
                'text' => 'Some representative placeholder content for the third slide.',
            ],
        ],
    ],
    [
        'id' => 'carouselExampleCaptions',
        'controls' => true,
    ],
);

Crossfade

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->carousel(
    [
        [
            'src' => '/twbs-helper-module/img/docs/slide1.svg',
            'active' => true,
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide2.svg',
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide3.svg',
            'alt' => '...',
        ],
    ],
    ['id' => 'carouselExampleFade', 'controls' => true, 'crossfade' => true],
);

Individual .carousel-item interval

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->carousel(
    [
        [
            'src' => '/twbs-helper-module/img/docs/slide1.svg',
            'interval' => 10000,
            'active' => true,
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide2.svg',
            'interval' => 2000,
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide3.svg',
            'alt' => '...',
        ],
    ],
    ['id' => 'carouselExampleInterval', 'controls' => true],
);

Disable touch swiping

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->carousel(
    [
        [
            'src' => '/twbs-helper-module/img/docs/slide1.svg',
            'active' => true,
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide2.svg',
            'alt' => '...',
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide3.svg',
            'alt' => '...',
        ],
    ],
    [
        'id' => 'carouselExampleControlsNoTouching',
        'controls' => true,
        'swiping' => false,
        'interval' => false,
    ],
);

Dark variant

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->carousel(
    [
        [
            'src' => '/twbs-helper-module/img/docs/slide1.svg',
            'active' => true,
            'alt' => '...',
            'indicator' => 'Slide 1',
            'caption' => [
                'title' => 'First slide label',
                'text' => 'Some representative placeholder content for the first slide.',
            ],
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide2.svg',
            'alt' => '...',
            'indicator' => 'Slide 2',
            'caption' => [
                'title' => 'Second slide label',
                'text' => 'Some representative placeholder content for the second slide.',
            ],
        ],
        [
            'src' => '/twbs-helper-module/img/docs/slide3.svg',
            'alt' => '...',
            'indicator' => 'Slide 3',
            'caption' => [
                'title' => 'Third slide label',
                'text' => 'Some representative placeholder content for the third slide.',
            ],
        ],
    ],
    [
        'id' => 'carouselExampleCaptions',
        'controls' => true,
        'variant' => 'dark',
    ],
);