Create Bootstrap5 based Image carousel with thumbnails

Tutorials

2.0

carousel,bootstrap5 carousel

```
Here is a Corousel widget that is an extension of yii\bootstrap5\Carousel, to show image thumbnails as indicators for the carousel.

Here is the widget code.
    <?php     namespace app\widgets;     use Yii;     use yii\bootstrap5\Html;     class Carousel extends \yii\bootstrap5\Carousel     {      public $thumbnails = [];     public function init()     {      parent::init();      Html::addCssClass($this->options, ['data-bs-ride' => 'carousel']);     if ($this->crossfade) {      Html::addCssClass($this->options, ['animation' => 'carousel-fade']); }
 
}
 
        }
 

 
  public function renderIndicators(): string      {     if ($this->showIndicators === false){     return '';     }     $indicators = [];      for ($i = 0, $count = count($this->items); $i < $count; $i++){     $options = [     'data' => [      'bs-target' => '#' . $this->options['id'],     'bs-slide-to' => $i     ],      'type' => 'button',                     'thumb' => $this->thumbnails[$i]['thumb']     ];     if ($i === 0){      Html::addCssClass($options, ['activate' => 'active']);     $options['aria']['current'] = 'true';     }
 

 
                 $indicators[] = Html::tag('li',Html::img($options['thumb']), $options); }
 
    }
 
     return Html::tag('ol', implode("\n", $indicators), ['class' => ['carousel-indicators']]);      } }