Class yii\bootstrap4\Carousel
Inheritance | yii\bootstrap4\Carousel » yii\bootstrap4\Widget » yii\base\Widget |
---|---|
Uses Traits | yii\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
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 (
|
yii\bootstrap4\Carousel |
Public 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
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
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.
Animate slides with a fade transition instead of a slide. Defaults to false
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' => [],
]
The HTML attributes for the widget container tag.
Whether carousel indicators (
- tag with anchors to items) should be displayed or not.
Method Details
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();
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']);
}
}
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));
}
}
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();
}
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.');
}
}
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']]);
}
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 |
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);
}
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']);
}
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";
}