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']]);
}

} ?> ` .product_img_slide { padding: 100px 0 0 0; }

.product_img_slide > .carousel-inner > .carousel-item { overflow: hidden; max-height: 650px; }

.carousel-inner { position: relative; width: 100%; }

.product_img_slide > .carousel-indicators { top: 0; left: 0; right: 0; width: 100%; bottom: auto; margin: auto; font-size: 0; cursor: e-resize; / overflow-x: auto; / text-align: left; padding: 10px 5px; / overflow-y: hidden;/ white-space: nowrap; position: absolute; }

.product_img_slide > .carousel-indicators li { padding: 0; width: 76px; height: 76px; margin: 0 5px; text-indent: 0; cursor: pointer; background: transparent; border: 3px solid #333331; -webkit-border-radius: 0; border-radius: 0; -webkit-transition: all 0.7s cubic-bezier(0.22, 0.81, 0.01, 0.99); transition: all 1s cubic-bezier(0.22, 0.81, 0.01, 0.99); }

.product_img_slide > .carousel-indicators .active { width: 76px; border: 0; height: 76px; margin: 0 5px; background: transparent; border: 3px solid #c13c3d; }

.product_img_slide > .carousel-indicators > li > img { display: block; /width:114px;/ height: 76px; }

.product_img_slide .carousel-inner > .carousel-item > a > img, .carousel-inner > .carousel-item > img, .img-responsive, .thumbnail a > img, .thumbnail > img { display: block; max-width: 100%; line-height: 1; margin: auto; }

.product_img_slide .carousel-control-prev { top: 58%; /left: auto;/ right: 76px; opacity: 1; width: 50px; bottom: auto; height: 50px; font-size: 50px; cursor: pointer; font-weight: 700; overflow: hidden; line-height: 50px; text-shadow: none; text-align: center; position: absolute; background: transparent; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; border-radius: 0; -webkit-transition: all 0.6s cubic-bezier(0.22, 0.81, 0.01, 0.99); transition: all 0.6s cubic-bezier(0.22, 0.81, 0.01, 0.99); }

.product_img_slide .carousel-control-next { top: 58%; left: auto; right: 25px; opacity: 1; width: 50px; bottom: auto; height: 50px; font-size: 50px; cursor: pointer; font-weight: 700; overflow: hidden; line-height: 50px; text-shadow: none; text-align: center; position: absolute; background: transparent; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); -webkit-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; border-radius: 0; -webkit-transition: all 0.6s cubic-bezier(0.22, 0.81, 0.01, 0.99); transition: all 0.6s cubic-bezier(0.22, 0.81, 0.01, 0.99); }

.product_img_slide .carousel-control-next:hover, .product_img_slide .carousel-control-prev:hover { color: #c13c3d; background: transparent; } `