第一张幻灯片后的字幕不显示 flexslider

Question

我是编码新手，我正在尝试添加带有过渡到 FlexSlider 的标题。它适用于第一张幻灯片，但适用于它不会显示之后的幻灯片。也许仅 css 还不足以解决这个问题？如果有人能告诉我如何在必要时用 js 完成它，那就太好了。非常感谢！

Link 到 jsfiddle：https://jsfiddle.net/ghLm7rL5/1/

代码：

    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        directionNav: false,
        animationLoop: false
      });
    });

.flexslider .slides .flex-caption{
 position: absolute; 
 background: rgba(0,0,0,0.75); 
 color: white; 
 padding: 10px 20px; 
 opacity: 0;
 bottom: 0; 
 left: -30%;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}

.flexslider .slides li:hover .flex-caption{  opacity: 1;  left: 0;}

<div class="flexslider">
   <ul class="slides">
     <li>
      <a href="#" rel="lightbox" title="Some Title">
      <img src="images/graphic_design_thumb1.png" alt="graphic_design_thumb1"/></a>
      <div class="flex-caption">Caption1</div></li>
            
     <li><a href="#" rel="lightbox" title="Some Title">
      <img src="images/graphic_design_thumb2.png" alt="graphic_design_thumb2"/></a>
      <div class="flex-caption">Caption2</div></li>
   </ul>
</div>

Answer 1

CSS

.slides li{
    position:relative;
}

.flexslider .slides .flex-caption{
    position: absolute; 
    background: rgba(0,0,0,0.75); 
    color: white; 
    padding: 10px 20px; 
    opacity: 0;
    bottom: 0; 
    left: -30%;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}

.flexslider .slides li:hover .flex-caption{  opacity: 1;  left: 0;}

Use the above CSS and it will work since your position:absolute for the caption you need to have a poition:relative for it's parent div so that it takes it width and shows else it will be show at the screen width which is nothing but the image1's width left side

DEMO

第一张幻灯片后的字幕不显示 flexslider

Captions after 1st slide doesnt show for flexslider

javascript

css

flexslider

caption