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