How to link two if statements

I am learning JS and have created a carousel with a caption underneath.

How do I get the Prev/Next buttons to affect the caption as well as the image? I've tried combining the if statements in several ways but have failed miserably.

Relevant HTML:

<span id="prev" class="arrow">&#10094;</span>
<div class="karussell" id="karussell">
    <a href="#"><img class="karu" name="esislaid"></a>
</div>
<span id="next" class="arrow">&#10095;</span>
<div class="caption">
    <h3 id="esikiri"></h3>
</div>

JS:

var p = 0;
var s = 0;
    var esileht = [];
    var aeg = 5000;
    var kiri = [];

    //Image List
    esileht[0] = 'img/tooted/raamat/graafvanalinn2016.jpg';
    esileht[1] = 'img/tooted/kaart/kaart_taskus_esipool.jpg';
    esileht[2] = 'img/tooted/kaart/graafkaart_esikylg.jpg';

    //Captions
    kiri[0] = 'Raamat "Tallinn. Graafiline vanalinn"';
    kiri[1] = 'Tallinna vanalinna graafiline kaart (suur formaat)';
    kiri[2] = 'Tallinna vanalinna graafiline kaart (väike formaat)';


// Left and Right arrows


    //Eelmine
    function eelmine(){
        if (p === 0){
            p = esileht.length;
        }
        p = p - 1;
        return esileht[p];

    }
    //Jargmine
    function jargmine(){
        p = p + 1;
        p = p % esileht.length;
        return esileht[p];


    }


document.getElementById('prev').addEventListener('click', function (e){
    document.querySelector('#karussell img').src = eelmine();
}
);

document.getElementById('next').addEventListener('click', function (e) {
    document.querySelector('#karussell img').src = jargmine();
}
);
    //Change Image

    function changePilt (){
        document.esislaid.src = esileht[p];

        if(p < esileht.length -1){
        p++;
        } else {
        p = 0;
        }
        setTimeout("changePilt()", aeg);
    }

    //Change Caption

    function changeKiri(){
    document.getElementById('esikiri').innerHTML = kiri[s];

    if(s < kiri.length - 1){
        s++;
        }
        else {
            s = 0;
        }
        setTimeout('changeKiri()', aeg);
    }

document.body.onload = function(){
    changePilt();
    changeKiri();
};

CSS, just in case:

.karussell {
  position: relative;
  width: 100%;
  max-height: 600px;
  overflow: hidden;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  color: #00A7E0;
  padding: 16px;
  font-weight: bold;
  font-size: 18px;
  border-radius: 3px;
  transition: 0.6s ease;
}

#next {
  right: 0;
}
#prev {
  left: 0;
}
.arrow:hover {
  background-color: rgba(0,0,0,0.8);
}
.caption {
  text-align: center;
  color: #00A7E0;
  padding: 2px 16px;
}
.karu {
    max-width: 75%;
    animation-name: fade;
    animation-duration: 2s;
}
@keyframes fade {
    from {opacity: 0.4}
    to {opacity: 1}
}
@media (max-width:767px){.karu{max-width: 95%;}}

I made a fiddle to try to illustrate (had to paste the js into the html tab to gt it to work for some reason): Fiddle