Slideshow with scrolling caption sidebar

HTML

<div class="slideshow-wrap">
    <div class="slideshow">
        <img src="http://lorempixel.com/output/city-q-c-640-4380-3.jpg"/>
        <img src="http://lorempixel.com/output/abstract-q-c-640-480-3.jpg"/>
        <img src="http://lorempixel.com/output/sports-q-c-640-480-3.jpg"/>
        <img src="http://lorempixel.com/output/cats-q-c-640-480-3.jpg"/>
        <img src="http://lorempixel.com/output/people-q-c-640-480-3.jpg"/>
        <img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg"/>
    </div>
    <div class="slideshow-caption">
        <a href="#">Caption for slide 1</a>
        <a href="#">Caption for slide 2</a>
        <a href="#">Caption for slide 3</a>
        <a href="#">Caption for slide 4</a>
        <a href="#">Caption for slide 5</a>
        <a href="#">Caption for slide 6</a>
    </div>
</div>

CSS

.slideshow-wrap {
    display:table;
    width:100%;
    height:100%;
}

.slideshow {
    display:table-cell;
    vertical-align:top;
    position:relative;
    line-height:0;
}
.slideshow img {
    width:100%;
    height:auto;
    position:absolute;
    top:0;
    left:0;
}
.slideshow img:last-of-type {
    position:relative;
}
.slideshow-caption {
    width:33.3%;
    height:100%;
    display:table-cell;
    vertical-align:top;
    overflow:hidden;
}
.slideshow-caption a:first-of-type:before {
    background:#000;
}
.slideshow-caption a:link, .slideshow-caption a:visited {
    display:block;
    height:25%;
    background:#ccc;
    padding:15px;
    position:relative;
    vertical-align:middle;
}
.slideshow-caption a span {
    display:block;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.slideshow-caption a:before {
    content:'';
    display:block;
    height:10px;
    width:10px;
    position:absolute;
    left:2px;
    top:50%;
    transform:translateY(-50%);
    border-radius:5px;
    background:red;
    transition:.5s;
    z-index:10;
}

JavaScript

var list = $('.slideshow');
var listItems = list.children('img');
list.append(listItems.get().reverse());

$('.slideshow-caption a').each(function (){
    $(this).wrapInner("<span></span>");
});
function slidePlay() {
    $('.slideshow img:last').fadeOut( function(){
        $(this).prependTo('.slideshow').show();
    });
    $('.slideshow-caption a:first').slideUp( function(){
        $(this).appendTo('.slideshow-caption').fadeIn();
    });
}
var myInterval = setInterval(slidePlay, 4000);