Yii2 по умолчанию имеет виджет Bootstrap Carousel. Использовать его элементарно, однако некоторые полезные параметры я нашел не сразу.
use yii\bootstrap\Carousel;
$carousel = [
[
'content' => '<img src="/uploads/carousel/img1.jpg"/>',
'caption' => '<h1>Заголовок</h1><p>Какой-то дополнительный текст</p><p><a href="/article/link/1" class="btn btn-primary">Подробнее <span class="glyphicon glyphicon-chevron-right"></a></p>',
'options' => []
],
[
'content' => '<img src="/uploads/carousel/img2.jpg"/>',
'caption' => '',
'options' => []
],
[
'content' => '<img src="/uploads/carousel/img3.jpg"/>',
'caption' => '',
'options' => ['class' => 'my-class']
]
];
echo Carousel::widget([
'items' => $carousel,
'options' => ['class' => 'carousel slide', 'data-interval' => '12000'],
'controls' => [
'<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>',
'<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>'
]
]);
Что стоит отметить:
- Интервал времени, через который сменяются кадры задаётся именно через
data-interval
вoptions
самого виджета. Другие варианты у меня не работали. Я не нашёл способа, чтобы задать интервал отдельно для каждого кадра. Если такое у вас получится, просьба написать в комментариях. - Элементы управления каруселью прижаты к верху и не красивы, если не задавать их таким явным образом в
options
виджета. caption
иoptions
для кадров не являются обязательными. Вoptions
могут бытьclass
,style
и другие атрибуты. Они добавятся кdiv
соответствующего кадра карусели.