Class yii\bootstrap\Carousel
Inheritance | yii\bootstrap\Carousel » yii\bootstrap\Widget » yii\base\Widget |
---|---|
Uses Traits | yii\bootstrap\BootstrapWidgetTrait |
Available since extension's version | 2.0 |
Source Code | https://github.com/yiisoft/yii2-bootstrap/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="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg"/>',
// equivalent to the above
['content' => '<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg"/>'],
// the item contains both the image and the caption
[
'content' => '<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"/>',
'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
'options' => [...],
],
]
]);
Public Properties
Property | Type | Description | Defined By |
---|---|---|---|
$clientEvents | array | The event handlers for the underlying Bootstrap JS plugin. | yii\bootstrap\BootstrapWidgetTrait |
$clientOptions | array | The options for the underlying Bootstrap JS plugin. | yii\bootstrap\BootstrapWidgetTrait |
$controls | array|boolean | The labels for the previous and the next control buttons. | yii\bootstrap\Carousel |
$items | array | List of slides in the carousel. | yii\bootstrap\Carousel |
$options | array | The HTML attributes for the widget container tag. | yii\bootstrap\Widget |
$showIndicators | boolean | Whether carousel indicators (
|
yii\bootstrap\Carousel |
Public Methods
Method | Description | Defined By |
---|---|---|
getView() | yii\bootstrap\BootstrapWidgetTrait | |
init() | Initializes the widget. | yii\bootstrap\Carousel |
renderControls() | Renders previous and next control buttons. | yii\bootstrap\Carousel |
renderIndicators() | Renders carousel indicators. | yii\bootstrap\Carousel |
renderItem() | Renders a single carousel item | yii\bootstrap\Carousel |
renderItems() | Renders carousel items as specified on $items. | yii\bootstrap\Carousel |
run() | Renders the widget. | yii\bootstrap\Carousel |
Protected Methods
Method | Description | Defined By |
---|---|---|
registerClientEvents() | Registers JS event handlers that are listed in $clientEvents. | yii\bootstrap\BootstrapWidgetTrait |
registerPlugin() | Registers a specific Bootstrap plugin and the related events | yii\bootstrap\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.
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="http://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' => [],
]
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']);
}
Defined in: yii\bootstrap\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\bootstrap\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' => 'left carousel-control',
'data-slide' => 'prev',
]) . "\n"
. Html::a($this->controls[1], '#' . $this->options['id'], [
'class' => 'right carousel-control',
'data-slide' => 'next',
]);
} 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, '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) {
$caption = Html::tag('div', $caption, ['class' => 'carousel-caption']);
}
$options = ArrayHelper::getValue($item, 'options', []);
} else {
throw new InvalidConfigException('The "content" option is required.');
}
Html::addCssClass($options, ['widget' => 'item']);
if ($index === 0) {
Html::addCssClass($options, 'active');
}
return Html::tag('div', $content . "\n" . $caption, $options);
}
Renders carousel items as specified on $items.
public string renderItems ( ) | ||
return | string |
The rendering result |
---|
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']);
}
Renders the widget.
public void run ( ) |
public function run()
{
$this->registerPlugin('carousel');
return implode("\n", [
Html::beginTag('div', $this->options),
$this->renderIndicators(),
$this->renderItems(),
$this->renderControls(),
Html::endTag('div')
]) . "\n";
}