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