将标题添加到图像滑块

Question

我想在此滑块的左下角添加标题，但我不确定如何做到这一点。

理想情况下，文本不应像图像一样滑动。 它应该像这样 。 我已经尝试过使用该插件，但老实说，它似乎过于复杂，该脚本运行正常，只是缺少标题...

任何帮助将不胜感激。 谢谢

的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(){ var old = $('.current').removeClass('current'); if ( old.is(':first-child')) { old.animate({left: "100%"}); $('.pictures').last().css({left: "-100%"}).addClass('current').animate({left: 0}); $('.panels > .caption').html($('.pictures').last().find("img")[0].src); }else{ old.animate({left: "100%"}); old.prev().css({left: "-100%"}).addClass('current').animate({left: 0}); $('.panels > .caption').html(old.prev().find("img")[0].src); } }); }); 

 .panels { position: absolute; } #panel8 { width: 360px; height: 180px; } .panels > .caption{ margin-top: -28px; position: absolute; padding: 4px 20px 4px 20px; background-color: rgba(255, 255, 255, 0.6); } .pictures { width: 100%; height: 100%; position: absolute; left: 100%; } .slider { width: 100%; height: 100%; position: relative; overflow: hidden; } .nav { width: 100%; height: 20px; color: #000; font-family: Monospace; font-size: 9px; text-align: right; line-height: 20px; position: absolute; bottom: 0; } #previous { vertical-align: middle; display: inline-block; line-height: normal; } #next { vertical-align: middle; display: inline-block; line-height: normal; } span { vertical-align: middle; display: inline-block; 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"> <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="caption">Caption</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> 

我已将标题添加到滑块并将其设置为position: absolute和-20px的margin 。