Create Bootstrap5 based Image carousel with thumbnails

3 0
1
Viewed: 169 258 times
Version: 2.0
Category: Tutorials
Written by: pravi pravi
Updated by: pravi pravi
Created: Dec 4, 2023
Updated: 2 years ago

You are viewing revision #6 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#5)next (#7) »

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

} ?>