Question

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

链接到jsfiddle：https://jsfiddle.net/ghLm7rL5/1/

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用上面的CSS，因为你position:absolute caption poition:relative需要为它的父div设置一个{{1}}，所以它需要宽度并显示其他情况显示在屏幕宽度，这只是image1的宽度左侧

DEMO

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

1 个答案: