Difference between #14 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

Use the following css styles for carousel to work as expected.
 
 
```english
```
.product_img_slide {
[...]
}
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: 119 493 times
Version: 2.0
Category: Tutorials
Tags: bootstrap5 carousel, carousel
Written by: pravi pravi
Last updated by: pravi pravi
Created on: Dec 4, 2023
Last updated: a year ago
Update Article
Revert to #14 | Revert to #17

Revisions

View all history