Yii2 轮播图组件应用

Wiki · 本文由 · ITer · 发布于 15天前 · 121 阅读

yii2 Carousel是一个基于JavaScript的图片轮播组件,使用Carousel可以快速的在网站任意位置放置一个图片轮播的效果

先看下效果: 代码如下:

<?php echo Carousel::widget([
    'items' => [
        // 只有图片的格式
        '<img src="http://www.yii-china.com/statics/images/b_1.jpg"/>',

        // 与上面的效果一致
        ['content' => '<img src="http://www.yii-china.com/statics/images/b_1.jpg"/>'],

        // 包含图片和字幕的格式
        [
            'content' => '<img src="http://www.yii-china.com/statics/images/b_1.jpg"/>',
            'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
            //'options' => [...],       //配置对应的样式
        ],
    ]
]);
?>

在轮播幻灯片列表。每个数组元素的可配属性

[
     // 必要的,轮播的内容(HTML),比如一个图像标签
     'content' => '<img src="http://www.yii-china.com/statics/images/b_1.jpg'/>

    // 可选的,该轮播标题(HTML)
     'caption' => '<h4>This is title</h4><p>This is the caption text</p>',

     // 可选的,轮播样式
     'options' => [],
]

成为第一个本话题的爱慕者吧

评论数量:0