Final Class Yiisoft\Bootstrap5\Carousel
| Inheritance | Yiisoft\Bootstrap5\Carousel » Yiisoft\Widget\Widget |
|---|
Carousel renders a carousel bootstrap JavaScript component.
For example:
<?= Carousel::widget()
->id('carouselExample')
->items(
CarouselItem::to(Img::tag()->alt('First slide')->src('image-1.jpg'), active: true),
CarouselItem::to(Img::tag()->alt('Second slide')->src('image-2.jpg')),
CarouselItem::to(Img::tag()->alt('Third slide')->src('image-3.jpg')),
)
?>
Public Methods
Constants
| Constant | Value | Description | Defined By |
|---|---|---|---|
| CLASS_CAROUSEL_CAPTION | 'carousel-caption d-none d-md-block' | Yiisoft\Bootstrap5\Carousel | |
| CLASS_CAROUSEL_CONTROL_NEXT | 'carousel-control-next' | Yiisoft\Bootstrap5\Carousel | |
| CLASS_CAROUSEL_CONTROL_NEXT_ICON | 'carousel-control-next-icon' | Yiisoft\Bootstrap5\Carousel | |
| CLASS_CAROUSEL_CONTROL_PREV | 'carousel-control-prev' | Yiisoft\Bootstrap5\Carousel | |
| CLASS_CAROUSEL_CONTROL_PREV_ICON | 'carousel-control-prev-icon' | Yiisoft\Bootstrap5\Carousel | |
| CLASS_CAROUSEL_INDICATORS | 'carousel-indicators' | Yiisoft\Bootstrap5\Carousel | |
| CLASS_CAROUSEL_INNER | 'carousel-inner' | Yiisoft\Bootstrap5\Carousel | |
| CLASS_CAROUSEL_ITEM | 'carousel-item' | Yiisoft\Bootstrap5\Carousel | |
| CLASS_IMAGE | 'd-block w-100' | Yiisoft\Bootstrap5\Carousel | |
| CLASS_SLIDE | 'slide' | Yiisoft\Bootstrap5\Carousel | |
| NAME | 'carousel' | Yiisoft\Bootstrap5\Carousel |
Method Details
Adds a sets of attributes.
| public addAttributes( array $attributes ): self | ||
| $attributes | array |
Attribute values indexed by attribute names. for example, |
| return | self |
A new instance with the specified attributes added. Example usage:
|
|---|---|---|
public function addAttributes(array $attributes): self
{
$new = clone $this;
$new->attributes = [...$this->attributes, ...$attributes];
return $new;
}
Adds one or more CSS classes to the existing classes.
Multiple classes can be added by passing them as separate arguments. null values are filtered out
automatically.
| public addClass( \BackedEnum|string|null $class ): self | ||
| $class | \BackedEnum|string|null |
One or more CSS class names to add. Pass |
| return | self |
A new instance with the specified CSS classes added to existing ones. |
|---|---|---|
public function addClass(BackedEnum|string|null ...$class): self
{
$new = clone $this;
$new->cssClasses = [...$this->cssClasses, ...$class];
return $new;
}
Adds a CSS style.
| public addCssStyle( array|string $style, boolean $overwrite = true ): self | ||
| $style | array|string |
The CSS style. If the value is an array, a space will separate the values.
For example, |
| $overwrite | boolean |
Whether to overwrite existing styles with the same name. If |
| return | self |
A new instance with the specified CSS style value added. Example usage:
// or
$carousel->addCssStyle(['color' => 'red', 'font-weight' => 'bold']);
|
|---|---|---|
public function addCssStyle(array|string $style, bool $overwrite = true): self
{
$new = clone $this;
Html::addCssStyle($new->attributes, $style, $overwrite);
return $new;
}
Adds a sets attribute value.
| public attribute( string $name, mixed $value ): self | ||
| $name | string |
The attribute name. |
| $value | mixed |
The attribute value. |
| return | self |
A new instance with the specified attribute added. Example usage:
|
|---|---|---|
public function attribute(string $name, mixed $value): self
{
$new = clone $this;
$new->attributes[$name] = $value;
return $new;
}
Sets the HTML attributes.
| public attributes( array $attributes ): self | ||
| $attributes | array |
Attribute values indexed by attribute names. |
| return | self |
A new instance with the specified attributes. |
|---|---|---|
public function attributes(array $attributes): self
{
$new = clone $this;
$new->attributes = $attributes;
return $new;
}
Sets whether it should automatically cycle through slides.
Bootstrap supports three modes of autoplaying for carousels:
- `carousel': Starts cycling when the page loads (recommended).
true: Likecarousel, but waits until the first manual interaction before cycling.falseor empty string: Disables autoplaying completely.
When autoplaying is enabled, cycling can be paused by hovering over the carousel, focusing on it, or clicking on carousel controls/indicators.
See also https://getbootstrap.com/docs/5.3/components/carousel/#autoplaying-carousels Example usage:
`php
// Start cycling immediately
$carousel->autoPlaying('carousel')
// Start cycling after first manual interaction
$carousel->autoPlaying(true)
// Disable auto cycling
$carousel->autoPlaying(false)
`.
| public autoPlaying( boolean|string $mode = 'carousel' ): self | ||
| $mode | boolean|string | |
| return | self |
A new instance with the specified autoplaying value. |
|---|---|---|
public function autoPlaying(bool|string $mode = 'carousel'): self
{
$dataBsRide = match ($mode) {
'', 'false', false => null,
'true', true => 'true',
default => 'carousel',
};
return $this->addAttributes(['data-bs-ride' => $dataBsRide]);
}
Sets the tag name for the content caption placeholder.
| public captionPlaceholderTagName( string $tag ): self | ||
| $tag | string |
The tag name for the content caption placeholder. |
| return | self |
A new instance with the specified tag name for the content caption placeholder. Example usage:
|
|---|---|---|
| throws | InvalidArgumentException |
if the tag name is an empty string. |
public function captionPlaceholderTagName(string $tag): self
{
$new = clone $this;
$new->captionPlaceholderTagName = $tag;
return $new;
}
Sets the tag name for the content caption.
| public captionTagName( string $tag ): self | ||
| $tag | string |
The tag name for the content caption. |
| return | self |
A new instance with the specified tag name for the content caption. Example usage:
|
|---|---|---|
| throws | InvalidArgumentException |
if the tag name is an empty string. |
public function captionTagName(string $tag): self
{
$new = clone $this;
$new->captionTagName = $tag;
return $new;
}
Replaces all existing CSS classes with the specified one(s).
Multiple classes can be added by passing them as separate arguments. null values are filtered out
automatically.
| public class( \BackedEnum|string|null $class ): self | ||
| $class | \BackedEnum|string|null |
One or more CSS class names to set. Pass |
| return | self |
A new instance with the specified CSS classes set. Example usage:
|
|---|---|---|
public function class(BackedEnum|string|null ...$class): self
{
$new = clone $this;
$new->cssClasses = $class;
return $new;
}
Sets the label for the next control button.
| public controlNextLabel( string $label ): self | ||
| $label | string |
The label for the next control button. |
| return | self |
A new instance with the specified label for the next control button. Example usage:
|
|---|---|---|
public function controlNextLabel(string $label): self
{
$new = clone $this;
$new->controlNextLabel = $label;
return $new;
}
Sets the label for the previous control button.
| public controlPreviousLabel( string $label ): self | ||
| $label | string |
The label for the previous control button. |
| return | self |
A new instance with the specified label for the previous control button. Example usage:
|
|---|---|---|
public function controlPreviousLabel(string $label): self
{
$new = clone $this;
$new->controlPreviousLabel = $label;
return $new;
}
Whether to show controls or not.
| public controls( boolean $enabled = true ): self | ||
| $enabled | boolean |
Whether to show controls or not. Default is |
| return | self |
A new instance with the specified value. Example usage:
|
|---|---|---|
public function controls(bool $enabled = true): self
{
$new = clone $this;
$new->controls = !$enabled;
return $new;
}
Sets the crossfade slides instead of sliding.
| public crossfade( boolean $enabled = true ): self | ||
| $enabled | boolean |
Whether to crossfade slides or not. Default is |
| return | self |
A new instance with the specified crossfade value. Example usage:
|
|---|---|---|
public function crossfade(bool $enabled = true): self
{
return $this->addClass($enabled ? 'carousel-fade' : null);
}
Sets the ID.
| public id( boolean|string $id ): self | ||
| $id | boolean|string |
The ID of the component. If |
| return | self |
A new instance with the specified ID. Example usage:
|
|---|---|---|
| throws | InvalidArgumentException |
if the ID is an empty string or |
public function id(bool|string $id): self
{
$new = clone $this;
$new->id = $id;
return $new;
}
Sets the items.
| public items( Yiisoft\Bootstrap5\CarouselItem $items ): self | ||
| $items | Yiisoft\Bootstrap5\CarouselItem |
The items. |
| return | self |
A new instance with the specified items. Example usage:
); |
|---|---|---|
public function items(CarouselItem ...$items): self
{
$new = clone $this;
$new->items = $items;
return $new;
}
Run the widget.
| public render( ): string | ||
| return | string |
The HTML representation of the element. |
|---|---|---|
| throws | InvalidArgumentException |
if the "id" property is an empty string or |
public function render(): string
{
$attributes = $this->attributes;
$classes = $attributes['class'] ?? null;
unset($attributes['class']);
if ($this->items === []) {
return '';
}
$id = $this->getId();
Html::addCssClass($attributes, [self::NAME, self::CLASS_SLIDE, $classes, ...$this->cssClasses]);
return Div::tag()
->attributes($attributes)
->addContent(
"\n",
$this->renderItems($id),
"\n",
$this->controls ? $this->renderControlPrevious($id) . "\n" : '',
$this->controls ? $this->renderControlNext($id) . "\n" : '',
)
->encode(false)
->id($id)
->render();
}
Whether to show indicators or not.
| public showIndicators( boolean $enabled = true ): self | ||
| $enabled | boolean |
Whether to show indicators or not. Default is |
| return | self |
A new instance with the specified value. Example usage:
|
|---|---|---|
public function showIndicators(bool $enabled = true): self
{
$new = clone $this;
$new->showIndicators = $enabled;
return $new;
}
Sets the theme.
| public theme( string $theme ): self | ||
| $theme | string |
The theme. |
| return | self |
A new instance with the specified theme. Example usage:
|
|---|---|---|
public function theme(string $theme): self
{
return $this->addAttributes(['data-bs-theme' => $theme === '' ? null : $theme]);
}
Toggles the touch swipe functionality.
| public touchSwiping( boolean $enabled = true ): self | ||
| $enabled | boolean |
Whether to enable the touch swipe functionality or not. Default is |
| return | self |
A new instance with the touch swipe functionality disabled. Example usage:
|
|---|---|---|
public function touchSwiping(bool $enabled = true): self
{
return $this->addAttributes(['data-bs-touch' => $enabled ? null : 'false']);
}
Signup or Login in order to comment.