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: 31 713 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 #14 | Revert to #17

Revisions

View all history