2016-06-27 8 views
0

とブートストラップスライダーを使用して、私はYiiのフレームワークとブートストラップスライダーを使いたいが、このコードは動作していない:の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フレームワークで正しく動作させるにはどうすればよいですか?

は 敬具

答えて

0

あなたはJSファイルを含めていないかもしれません、ありがとうございました。アセット内でそれを確認する

0
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' => [...], 
     ], 
    ] 
]); 
関連する問題