Cycle widget
yii2-cycle2 demo

PHP

<?= Cycle::widget([
    'dataProvider' => $dataProvider,
    'imgAttribute' => 'photo',
    'captionAttributes' => [ 'name', 'town' ],
    'overlayAttributes' => [ 'year' => 'built', 'height' => function($model, $widget) { return $model->height . ' meter'; } ],
    'tooltipAttribute' => 'name',
    'options' => [
        'fx' => 'scrollVert',
    ],
]) ?>

CSS

/* no CSS */

PHP

<?= Cycle::widget([
    'dataProvider' => $dataProvider,
    'imgAttribute' => 'photo',
    'captionAttributes' => [ 'name', 'town' ],
    'overlayAttributes' => [ 'year' => 'built', 'height' => function($model, $widget) { return $model->height . ' meter'; } ],
    'tooltipAttribute' => 'name',
    'options' => [
        'captionPlugin' => 'caption2',
        'captionFxOut' => "slideUp",
        'captionFxIn' => "slideDown",
        'overlayFxOut' => "slideUp",
        'overlayFxIn' => "slideDown",
        'timeout' => 3500,
        'speed' => 2000,
    ],
]) ?>

CSS

.cycle-caption {
  position: absolute;
  top: 0.3em;
  right: 1em;
  z-index: 700;
  font-weight: bold;
  color: #fff;
  text-align: right;
}
.cycle-overlay {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 700;
  background-color: rgba(256,256,256,.5);
  padding: 8px 1em 2px;
  font-weight: bold;
}

.slide-name {
  display: block;
  font-size: 1.15em;
}
.slide-town {
  display: block;
}
.slide-year {
  display: block;
  color: blue;
}
.slide-height {
  display: block;
}

PHP

<?= Cycle::widget([
    'dataProvider' => $dataProvider,
    'imgAttribute' => 'photo',
    'captionAttributes' => [ 'name', 'town' ],
    'overlayAttributes' => [ 'year' => 'built', 'height' => function($model, $widget) { return $model->height . ' meter'; } ],
    'tooltipAttribute' => 'name',
    'options' => [
        'fx' => 'tileSlide',
        'tileCount' => 24,
        'tileVertical' => false,
        'timeout' => 2400,
        'speed' => 400,
        'overlay' => '#ovl'
    ],
]) ?>
<div id="ovl" class="overlay"></div>

CSS

.cycle-caption {
  position: absolute;
  top: 12em;
  width: 100%;
  z-index: 700;
  font-weight: bold;
  color: #fff;
  background-color: rgba(0, 0, 0, .2);
  text-align: center;
}
.cycle-overlay {
  position: absolute;
  top: 1em;
  width: 100%;
  z-index: 700;
  color: #fff;
  text-align: center;
}

.slide-name {
  display: block;
  font-size: 2.4em;
}
.slide-town {
  display: block;
  font-size: 1.8em;
}

.overlay {
    transform-origin: left top;
    transform: translateX(100%) rotate(-90deg);
    font-weight: bold;
    }