Create Bootstrap5 based Image carousel with thumbnails

Tutorials

2.0

carousel,bootstrap5 carousel

Use the following css styles for carousel to work as expected.
 
 
```english
```
.product_img_slide {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']]);     } }
 
 
You can use the above widget in your view file as below:
 
        <?php  
 
    $indicators = [
 
       '0' =>[ 'thumb' => "https://placehold.co/150X150?text=A"],
 
       '1' => ['thumb' => 'https://placehold.co/150X150?text=B'],
 
       '2' => [ 'thumb' => 'https://placehold.co/150X150?text=C']
 
    ];
 
    $items = [
 
        [ 'content' =>Html::img('https://live.staticflickr.com/8333/8417172316_c44629715e_w.jpg')],
 
        [ 'content' =>Html::img('https://live.staticflickr.com/3812/9428789546_3a6ba98c49_w.jpg')],
 
        [ 'content' =>Html::img('https://live.staticflickr.com/8514/8468174902_a8b505a063_w.jpg')]   
 
    ];
 
 
    echo Carousel::widget([
 
        'items' => 
 
            $items,
 
         'thumbnails'  => $indicators,
 
         'options' => [       
 
              'data-interval' => 3, 'data-bs-ride' => 'scroll','class' => 'carousel product_img_slide',
 
          ],
 
 
    ]);