Class yii\bootstrap4\Carousel

Inheritanceyii\bootstrap4\Carousel » yii\bootstrap4\Widget » yii\base\Widget
Uses Traitsyii\bootstrap4\BootstrapWidgetTrait
Source Code https://github.com/yiisoft/yii2-bootstrap4/blob/master/src/Carousel.php

Carousel renders a carousel bootstrap javascript component.

For example:

echo Carousel::widget([
    'items' => [
        // the item contains only the image
        '<img src="https://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg"/>',
        // equivalent to the above
        ['content' => '<img src="https://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg"/>'],
        // the item contains both the image and the caption
        [
            'content' => '<img src="https://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"/>',
            'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
            'captionOptions' => ['class' => ['d-none', 'd-md-block']]
            'options' => [...],
        ],
    ]
]);

See also https://getbootstrap.com/docs/4.5/components/carousel/.

Public Properties

Hide inherited properties

Property Type Description Defined By
$clientEvents array The event handlers for the underlying Bootstrap JS plugin. yii\bootstrap4\BootstrapWidgetTrait
$clientOptions array The options for the underlying Bootstrap JS plugin. yii\bootstrap4\BootstrapWidgetTrait
$controls array|false The labels for the previous and the next control buttons. yii\bootstrap4\Carousel
$crossfade boolean Animate slides with a fade transition instead of a slide. yii\bootstrap4\Carousel
$items array List of slides in the carousel. yii\bootstrap4\Carousel
$options array The HTML attributes for the widget container tag. yii\bootstrap4\Carousel
$showIndicators boolean Whether carousel indicators (
    tag with anchors to items) should be displayed or not.
yii\bootstrap4\Carousel

Public Methods

Hide inherited methods

Method Description Defined By
getView() yii\bootstrap4\BootstrapWidgetTrait
init() Initializes the widget. yii\bootstrap4\Carousel
renderControls() Renders previous and next control buttons. yii\bootstrap4\Carousel
renderIndicators() Renders carousel indicators. yii\bootstrap4\Carousel
renderItem() Renders a single carousel item yii\bootstrap4\Carousel
renderItems() Renders carousel items as specified on $items. yii\bootstrap4\Carousel
run() yii\bootstrap4\Carousel

Protected Methods

Hide inherited methods

Method Description Defined By
registerClientEvents() Registers JS event handlers that are listed in $clientEvents. yii\bootstrap4\BootstrapWidgetTrait
registerPlugin() Registers a specific Bootstrap plugin and the related events yii\bootstrap4\BootstrapWidgetTrait

Property Details

Hide inherited properties

$controls public property

The labels for the previous and the next control buttons. If false, it means the previous and the next control buttons should not be displayed.

public array|false $controls = [
    
'<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span>',
    
'<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span>',
]
$crossfade public property

Animate slides with a fade transition instead of a slide. Defaults to false

public boolean $crossfade false
$items public property

List of slides in the carousel. Each array element represents a single slide with the following structure:

[
    // required, slide content (HTML), such as an image tag
    'content' => '<img src="https://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg"/>',
    // optional, the caption (HTML) of the slide
    'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
    // optional the HTML attributes of the slide container
    'options' => [],
]
public array $items = []
$options public property

The HTML attributes for the widget container tag.

public array $options = [
    
'data-ride' => 'carousel',
]
$showIndicators public property

Whether carousel indicators (

    tag with anchors to items) should be displayed or not.

public boolean $showIndicators true

Method Details

Hide inherited methods

getView() public abstract method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::getView()

See also \yii\base\Widget::getView().

public abstract \yii\web\View getView ( )
return \yii\web\View

The view object that can be used to render views or view files.

                abstract function getView();

            
init() public method

Initializes the widget.

public void init ( )

                public function init()
{
    parent::init();
    Html::addCssClass($this->options, ['widget' => 'carousel slide']);
    if ($this->crossfade) {
        Html::addCssClass($this->options, ['animation' => 'carousel-fade']);
    }
}

            
registerClientEvents() protected method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::registerClientEvents()

Registers JS event handlers that are listed in $clientEvents.

protected void registerClientEvents ( )

                protected function registerClientEvents()
{
    if (!empty($this->clientEvents)) {
        $id = $this->options['id'];
        $js = [];
        foreach ($this->clientEvents as $event => $handler) {
            $js[] = "jQuery('#$id').on('$event', $handler);";
        }
        $this->getView()->registerJs(implode("\n", $js));
    }
}

            
registerPlugin() protected method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::registerPlugin()

Registers a specific Bootstrap plugin and the related events

protected void registerPlugin ( $name )
$name string

The name of the Bootstrap plugin

                protected function registerPlugin($name)
{
    $view = $this->getView();
    BootstrapPluginAsset::register($view);
    $id = $this->options['id'];
    if ($this->clientOptions !== false) {
        $options = empty($this->clientOptions) ? '' : Json::htmlEncode($this->clientOptions);
        $js = "jQuery('#$id').$name($options);";
        $view->registerJs($js);
    }
    $this->registerClientEvents();
}

            
renderControls() public method

Renders previous and next control buttons.

public void renderControls ( )
throws \yii\base\InvalidConfigException

if $controls is invalid.

                public function renderControls()
{
    if (isset($this->controls[0], $this->controls[1])) {
        return Html::a($this->controls[0], '#' . $this->options['id'], [
                'class' => 'carousel-control-prev',
                'data-slide' => 'prev',
                'role' => 'button'
            ]) . "\n"
            . Html::a($this->controls[1], '#' . $this->options['id'], [
                'class' => 'carousel-control-next',
                'data-slide' => 'next',
                'role' => 'button'
            ]);
    } elseif ($this->controls === false) {
        return '';
    } else {
        throw new InvalidConfigException('The "controls" property must be either false or an array of two elements.');
    }
}

            
renderIndicators() public method

Renders carousel indicators.

public string renderIndicators ( )
return string

The rendering result

                public function renderIndicators()
{
    if ($this->showIndicators === false) {
        return '';
    }
    $indicators = [];
    for ($i = 0, $count = count($this->items); $i < $count; $i++) {
        $options = ['data-target' => '#' . $this->options['id'], 'data-slide-to' => $i];
        if ($i === 0) {
            Html::addCssClass($options, ['activate' => 'active']);
        }
        $indicators[] = Html::tag('li', '', $options);
    }
    return Html::tag('ol', implode("\n", $indicators), ['class' => ['carousel-indicators']]);
}

            
renderItem() public method

Renders a single carousel item

public string renderItem ( $item, $index )
$item string|array

A single item from $items

$index integer

The item index as the first item should be set to active

return string

The rendering result

throws \yii\base\InvalidConfigException

if the item is invalid

                public function renderItem($item, $index)
{
    if (is_string($item)) {
        $content = $item;
        $caption = null;
        $options = [];
    } elseif (isset($item['content'])) {
        $content = $item['content'];
        $caption = ArrayHelper::getValue($item, 'caption');
        if ($caption !== null) {
            $captionOptions = ArrayHelper::remove($item, 'captionOptions', []);
            Html::addCssClass($captionOptions, ['widget' => 'carousel-caption']);
            $caption = Html::tag('div', $caption, $captionOptions);
        }
        $options = ArrayHelper::getValue($item, 'options', []);
    } else {
        throw new InvalidConfigException('The "content" option is required.');
    }
    Html::addCssClass($options, ['widget' => 'carousel-item']);
    if ($index === 0) {
        Html::addCssClass($options, ['activate' => 'active']);
    }
    return Html::tag('div', $content . "\n" . $caption, $options);
}

            
renderItems() public method

Renders carousel items as specified on $items.

public string renderItems ( )
return string

The rendering result

throws \yii\base\InvalidConfigException

                public function renderItems()
{
    $items = [];
    for ($i = 0, $count = count($this->items); $i < $count; $i++) {
        $items[] = $this->renderItem($this->items[$i], $i);
    }
    return Html::tag('div', implode("\n", $items), ['class' => 'carousel-inner']);
}

            
run() public method

public void run ( )
throws \yii\base\InvalidConfigException

                public function run()
{
    $this->registerPlugin('carousel');
    return implode("\n", [
            Html::beginTag('div', $this->options),
            $this->renderIndicators(),
            $this->renderItems(),
            $this->renderControls(),
            Html::endTag('div')
        ]) . "\n";
}