Question

我想在yii2中制作图片幻灯片，但不幸的是图片无法改变。

AppAsset：

    class AppAsset extends AssetBundle
    {

    public $css = [
       // 'css/site.css',
        'css/animate.css',
        'css/font-awesome.min.css',
        'css/main.css',
        'css/prettyPhoto.css',
    ];
    public $js = [
        'js/main.js',
        'js/html5shiv.js',
        'js/jquery.isotope.min.js',
        'js/jquery.prettyPhoto.js',
        'js/main.js',
        'js/respond.min.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];

}

这是视图文件，我只获得滑块中的第一个图像：

<section id="main-slider" class="no-margin">
    <div class="carousel slide wet-asphalt">
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1"></li>
            <li data-target="#main-slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active" style="background-image: url(images/slider/bg1.jpg)">
            </div><!--/.item-->
            <div class="item" style="background-image: url(images/slider/bg2.jpg)">  
            </div><!--/.item-->
            <div class="item" style="background-image: url(images/slider/bg3.jpg)">
            </div><!--/.item-->
        </div><!--/.carousel-inner-->
    </div><!--/.carousel-->
    <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
        <i class="icon-angle-left"></i>
    </a>
    <a class="next hidden-xs" href="#main-slider" data-slide="next">
        <i class="icon-angle-right"></i>
    </a>
</section><!--/#main-slider-->

Answer 1

<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\bootstrap\Carousel;

$this -> title = 'Login';
?>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <?php echo Carousel::widget(
            ['items' => [
            ['content' => '<img src="http://upload.wikimedia.org/wikipedia/commons/a/a1/Baby_goats_jan_2007_crop.jpg"/>',
            'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
            'options' => ['interval' => '600']
            ],
            ['content' => '<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQ-YmEBJbefTMcAHWut4qcZTFuq-ZyTudPjA5HCkSgMvlgf5wM5hQ"/>',
            'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
            'options' => ['interval' => '600']
            ],
            ['content' => '<img src="http://pixabay.com/static/uploads/photo/2014/08/05/09/58/goat-410279_640.jpg"/>',
            'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
            'options' => ['interval' => '600']
            ],
            ]
            ]); ?>
       </div>
   </div>
</div>

Answer 2

无需修改轮播的源代码，您也可以在关闭项目部分后立即添加'options'=> ['class'=>'carousel slide'],

使用yii2滑动图像

2 个答案: