Difference between #10 and #17 of
Create Bootstrap5 based Image carousel with thumbnails

Changes

Title unchanged

Create Bootstrap5 based Image carousel with thumbnails

Category unchanged

Tutorials

Yii version unchanged

2.0

Tags unchanged

carousel,bootstrap5 carousel

Content changed

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;
 
}
 
```
 
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 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']]);
 
        } }
 
 
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',
 
          ],
 
 
    ]);
2 0
1 follower
Viewed: 31 726 times
Version: 2.0
Category: Tutorials
Tags: bootstrap5 carousel, carousel
Written by: pravi
Last updated by: pravi
Created on: Dec 4, 2023
Last updated: 5 months ago
Update Article
Revert to #10 | Revert to #17

Revisions

View all history