将标题添加到图像滑块

Question

我想在此滑块的左下角添加说明文字，但我不太确定该怎么做。

理想情况下，文字不应像图片那样滑动。它应该表现 like this。我试过使用那个插件，但老实说它看起来过于复杂，这个脚本工作得很好，只是缺少字幕...

如有任何帮助，我们将不胜感激。谢谢

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。

将标题添加到图像滑块

Add captions to image slider

html

javascript

css

jquery

slider