title: Sliding image using yii2
body: <p>I want to make image slideshow in yii2, but unfortunatelly the image can't change.</p>
  
  <p>AppAsset:</p>
  
  <pre><code>    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',
      ];
  
  }
  </code></pre>
  
  <p>This is the view file, and I only get the first image in the slider:</p>
  
  <pre><code>&lt;section id="main-slider" class="no-margin"&gt;
      &lt;div class="carousel slide wet-asphalt"&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#main-slider" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#main-slider" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#main-slider" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active" style="background-image: url(images/slider/bg1.jpg)"&gt;
              &lt;/div&gt;&lt;!--/.item--&gt;
              &lt;div class="item" style="background-image: url(images/slider/bg2.jpg)"&gt;  
              &lt;/div&gt;&lt;!--/.item--&gt;
              &lt;div class="item" style="background-image: url(images/slider/bg3.jpg)"&gt;
              &lt;/div&gt;&lt;!--/.item--&gt;
          &lt;/div&gt;&lt;!--/.carousel-inner--&gt;
      &lt;/div&gt;&lt;!--/.carousel--&gt;
      &lt;a class="prev hidden-xs" href="#main-slider" data-slide="prev"&gt;
          &lt;i class="icon-angle-left"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;a class="next hidden-xs" href="#main-slider" data-slide="next"&gt;
          &lt;i class="icon-angle-right"&gt;&lt;/i&gt;
      &lt;/a&gt;
  &lt;/section&gt;&lt;!--/#main-slider--&gt;
  </code></pre>