I'm struggling to add text under the images in this slider. The functionality is simple, but I can't figure it out. I might have to rewrite it. Here's the HTML and JS:
<div id="look-book-scroll">
<a href="javascript:;" id="lookbook-left-advance"></a>
<div id="lookbook-wrapper">
<div class="lookbook-image">
<%= image_tag(asset_path("img/page1.jpg")) %>
<div class="lookbook-bl">
<p>Hi Gus!</p>
</div>
</div>
<div class="lookbook-image">
<%= image_tag(asset_path("img/page2.jpg") ) %>
</div>
<div class="lookbook-image">
<%= image_tag(asset_path("img/page3.jpg")) %>
</div>
</div>
<a href="javascript:;" id="lookbook-right-advance"></a>
</div>
JS:
// LookBook Right Click
$("#lookbook-right-advance").click(function(){
if(lookbook_image_scrolling == false){
lookbook_image_scrolling = true;
if(parseInt($("#lookbook-wrapper .lookbook-image:first").css('left')) == -890){
$("#lookbook-wrapper .lookbook-image:first").remove().insertAfter("#lookbook-wrapper .lookbook-image:last");
$("#lookbook-wrapper .lookbook-image:last").css('left', ((lookbook_image_num - 1) * 890)+'px');
}
$("#lookbook-wrapper .lookbook-image").each(function(){
$(this).animate({
left: '-=890px'
}, 1000, function(){
lookbook_image_scrolling = false;
});
});
}
});
Also, including the CSS that may be causing the issue:
#lookbook-wrapper{
position: relative;
height: 590px;
width: 830px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
#lookbook-wrapper .lookbook-image {
position:absolute;
top: 0;
z-index: 1;
width: 830px;
}
#lookbook-wrapper .lookbook-image:first-of-type {
z-index: 2;
}
#lookbook-left-advance {
left: -39px;
cursor: w-resize !important;
@include store-sprite(lookbook_left_button);
}
The left-advance function is the same as the right one so just focus on fixing the right. Any suggestions would be greatly appreciated!