Create Bootstrap5 based Image carousel with thumbnails

Tutorials

2.0

carousel,bootstrap5 carousel

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