將標題添加到圖像滑塊

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 。