Create Bootstrap5 based Image carousel with thumbnails

Tutorials

2.0

carousel,bootstrap5 carousel

```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 a Corousel widget that is an extension of yii\bootstrap5\Carousel, to show image thumbnails as indicators for the carousel.