为图像滑块添加标题

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/

这样的东西？

＆＃13;

＆＃13;

$(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);
        }
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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