2015-03-02 110 views
0

我想在yii2中製作圖像幻燈片,但不幸的是圖像無法更改。使用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--> 
+0

檢查頁面上的JavaScript錯誤與螢火蟲。這將幫助您找到問題。 – ahb360 2015-03-02 07:07:03

+0

服務器端的圖像在哪裏?圖像是網絡目錄的一部分嗎? – robsch 2015-03-02 10:43:30

回答

2
<?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> 
+0

要添加滑動效果,請轉到供應商/ yiisoft/yii2-bootstrap/Carousel.php,查找Html :: addCssClass行($ this-> options,'carousel');將其更改爲Html :: addCssClass($ this-> options,'carousel slide'); – sharad 2015-03-26 06:40:02

1

沒有必要修改旋轉木馬的源代碼,你也可以簡單地在後面加上'options'=> ['class'=>'carousel slide'],關閉項目部分