在 yii 框架中使用引导滑块答案

【问题标题】：Using bootstrap slider with yii framework在 yii 框架中使用引导滑块
【发布时间】：2016-06-27 02:22:27
【问题描述】：

我想在 yii 框架中使用引导滑块，但是这段代码不起作用：

    <!-- Custom CSS -->
<style>
/*
 * Start Bootstrap - Full Slider (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

html,
body {
    height: 400px;
}

.carousel,
.item,
.active {
    height: 400px;
}

.carousel-inner {
    height: 400px;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 400px;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

footer {
    margin: 50px 0;
}
</style>
 <?php foreach($slides as $slide): ?>
<header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('<?= Yii::$app->urlManager->baseUrl . '/up/img/'.$slide->img_adress ?>');"></div>
                  </div>


        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>

    </header><?php endforeach; ?>

我看到页面中的所有图像，但没有看到幻灯片。

如何才能正常使用引导滑块和 yii 框架？

非常感谢，最好的问候

【问题讨论】：

标签： php jquery twitter-bootstrap yii

【解决方案1】：

可能你没有包含 js 文件。检查资产

【讨论】：

【解决方案2】：

Yii provide Class yii\bootstrap\Carousel so you can use this code for render slider

echo Carousel::widget([
    'items' => [
        // the item contains only the image
        '<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg"/>',
        // equivalent to the above
        ['content' => '<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg"/>'],
        // the item contains both the image and the caption
        [
            'content' => '<img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"/>',
            'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
            'options' => [...],
        ],
    ]
]);

【讨论】：