Добавить подписи к слайдеру изображения

Question

Я хотел бы добавить титры в нижний левый угол этого слайдера, но я не уверен, как это сделать.

В идеале текст НЕ должен скользить, как изображения. Он должен вести себя like this. Я пробовал использовать этот плагин, но, честно говоря, он выглядит слишком сложным, и этот скрипт работает нормально, он просто пропускает титры ...

Любая помощь будет высоко оценена. Благодаря

JSFiddle

HTML

<div id="panel8" class="panels" style=" z-index: 62"> 
    <div class="slider"> 
     <div class="pictures"><img src="http://i.imgur.com/hZfcYNw.jpg"></div> 
     <div class="pictures"><img src="http://i.imgur.com/PFkzdOd.jpg"></div> 
     <div class="pictures"><img src="http://i.imgur.com/yyjdlgQ.jpg"></div> 
    </div> 
<div class="nav"> 
    <div id="previous" style=" cursor: pointer">PREV</div> 
    <span>|</span> 
    <div id="next" style=" cursor: pointer">NEXT&nbsp;</div> 
</div> 
</div> 

JS

$(document).ready(function(){ 
    $('.pictures').first().addClass('current').css({left: 0}); 

    $('#next').click(function(){ 
     var old = $('.current').removeClass('current'); 
     if (old.is(':last-child')) { 
      old.animate({left: "-100%"}); 
      $('.pictures').first().css({left: "100%"}).addClass('current').animate({left: 0}); 
     }else{ 
      old.animate({left: "-100%"}); 
      old.next().css({left: "100%"}).addClass('current').animate({left: 0}); 
     }   
    }); 

    $('#previous').click(function(){ 
     var old = $('.current').removeClass('current'); 
     if (old.is(':first-child')) { 
      old.animate({left: "100%"}); 
      $('.pictures').last().css({left: "-100%"}).addClass('current').animate({left: 0}); 
     }else{ 
      old.animate({left: "100%"}); 
      old.prev().css({left: "-100%"}).addClass('current').animate({left: 0}); 
     } 
    }); 
}); 

Answer 1

http://jsfiddle.net/fswe4azh/2/

Что-то вроде этого?

$(document).ready(function(){ 
 
    $('.pictures').first().addClass('current').css({left: 0}); 
 
    $('.panels > .caption').html($('.pictures').first().find("img")[0].src); 
 

 
    $('#next').click(function(){ 
 
     var old = $('.current').removeClass('current'); 
 
     if (old.is(':last-child')) { 
 
      old.animate({left: "-100%"}); 
 
      $('.pictures').first().css({left: "100%"}).addClass('current').animate({left: 0}); 
 
      $('.panels > .caption').html($('.pictures').first().find("img")[0].src); 
 
     }else{ 
 
      old.animate({left: "-100%"}); 
 
      old.next().css({left: "100%"}).addClass('current').animate({left: 0}); 
 
      $('.panels > .caption').html(old.next().find("img")[0].src); 
 
     } 
 
    }); 
 

 
    $('#previous').click(function(){ 
 
\t \t var old = $('.current').removeClass('current'); 
 
     if (old.is(':first-child')) { 
 
\t \t \t old.animate({left: "100%"}); 
 
\t \t \t $('.pictures').last().css({left: "-100%"}).addClass('current').animate({left: 0}); 
 
      $('.panels > .caption').html($('.pictures').last().find("img")[0].src); 
 
     }else{ 
 
\t \t \t old.animate({left: "100%"}); 
 
\t \t \t old.prev().css({left: "-100%"}).addClass('current').animate({left: 0}); 
 
      $('.panels > .caption').html(old.prev().find("img")[0].src); 
 
     } 
 
    }); 
 
});

.panels { 
 
\t position: absolute; 
 
} 
 

 
#panel8 { 
 
\t width: 360px; 
 
\t height: 180px; 
 
} 
 

 
.panels > .caption{ 
 
    margin-top: -28px; 
 
    position: absolute; 
 
    padding: 4px 20px 4px 20px; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
} 
 

 
.pictures { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: absolute; 
 
\t left: 100%; 
 
} 
 

 
.slider { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
} 
 

 
.nav { 
 
\t width: 100%; 
 
\t height: 20px; 
 
\t color: #000; 
 
\t font-family: Monospace; 
 
\t font-size: 9px; 
 
\t text-align: right; 
 
\t line-height: 20px; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
} 
 

 
#previous { 
 
\t vertical-align: middle; 
 
\t display: inline-block; 
 
\t line-height: normal; 
 
} 
 

 
#next { 
 
\t vertical-align: middle; 
 
\t display: inline-block; 
 
\t line-height: normal; 
 
} 
 

 
span { 
 
\t vertical-align: middle; 
 
\t display: inline-block; 
 
\t line-height: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="panel8" class="panels" style=" z-index: 62"> 
 
\t <div class="slider"> 
 
\t \t <div class="pictures"><img src="http://i.imgur.com/hZfcYNw.jpg"></div> 
 
\t \t <div class="pictures"><img src="http://i.imgur.com/PFkzdOd.jpg"></div> 
 
\t \t <div class="pictures"><img src="http://i.imgur.com/yyjdlgQ.jpg"></div> 
 
\t </div> 
 
      <div class="caption">Caption</div> 
 
<div class="nav"> 
 
\t <div id="previous" style=" cursor: pointer">PREV</div> 
 
\t <span>|</span> 
 
\t <div id="next" style=" cursor: pointer">NEXT&nbsp;</div> 
 
</div> 
 
</div>

Я добавил заголовок к ползуну и установить его на position: absolute и margin из -20px.