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