I'd like to add captions to the bottom left corner of this slider but I'm not really sure how to do it.
Ideally, text should NOT slide like the images. It should behave like this . I've tried using that plugin but honestly it seems overcomplicated and this script is working just fine, it's just missing the captions...
Any help would be highly appreciated. Thanks
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 </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});
}
});
});
http://jsfiddle.net/fswe4azh/2/
Something like this?
$(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 </div> </div> </div>
I've added a caption to the slider and set it to position: absolute
and a margin
of -20px
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.