Difference between #15 and #16 of
Create Bootstrap5 based Image carousel with thumbnails

Revision #16 has been created by pravi on Dec 4, 2023, 1:02:37 PM with the memo:

add example
« previous (#15) next (#17) »

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

[...]
}

$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: 79 088 times
Version: 2.0
Category: Tutorials
Tags: bootstrap5 carousel, carousel
Written by: pravi
Last updated by: pravi
Created on: Dec 4, 2023
Last updated: 11 months ago
Update Article
Revert to #15 | Revert to #16

Revisions

View all history