Create Bootstrap5 based Image carousel with thumbnails

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

} ?>


2 0
1 follower
Viewed: 77 371 times
Version: 2.0
Category: Tutorials
Written by: pravi
Last updated by: pravi
Created on: Dec 4, 2023
Last updated: 11 months ago
Update Article

Revisions

View all history