.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; } `

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