Sliding image using yii2

问题

I want to make image slideshow in yii2, but unfortunatelly the image can't change.

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',
    ];

}

This is the view file, and I only get the first image in the slider:

<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-->

回答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>

回答2:

There is no need to modify carousel's source code, you can also simply add 'options'=> ['class'=>'carousel slide'], right after closing the items section

来源：https://stackoverflow.com/questions/28803436/sliding-image-using-yii2