자막과 함께 슬라이더를 표시하는 방법?

Question

JQuery와

$('.slider').cycle({ 
    fx: 'scrollHorz', 
    slides: '>a', 
    swipe: true, 
    easing: 'easeInOutExpo', 
    prev:'.btn_prev', 
    next:'.btn_next', 
    timeout: 5000, 
    speed: 1000, 
}); 

HTML

.caption { 
    position: absolute; 
    top: 0; 
    right: 0; 
    background: #000; 
    opacity: 0.7; 
    height: 100% 
    width: 300px; 
} 

는 설명과 함께 오른쪽에 불투명도 검은 배경에 자막을하고 싶었

<div class="slider"> 

    <a class="cycle-slide"> 
     <img src="slide07.jpg"> 
     <div class="caption"> 
      skdfksfksdfksdhfvdkvdk 
     </div> 
    </a> 


    <a class="cycle-slide"> 
     <img src="slide07.jpg"> 
     <div class="caption"> 
      skdfksfksdfksdhfvdkvdk 
     </div> 
    </a> 

    <a class="cycle-slide"> 
     <img src="slide07.jpg"> 

     <div class="caption"> 
      skdfksfksdfksdhfvdkvdk 
     </div> 
    </a> 

</div> 

CSS. 그러나 자막은 전혀 나타나지 않습니다. 오른쪽에있는 이미지에 캡션을 표시하는 데 어려움을 겪어 왔습니다.

데모주기 웹 사이트에서 확인한 후 alt 키를 사용하면 하단에 캡션이 표시됩니다. 캡션이 왜 제대로 작동하지 않는지 잘 모릅니다.

업데이트 : 문제 화살표 - 다음과 어떻게 함께 슬라이드 그래서 그들을 슬라이드 '캡션 영역의 모든에 머물 수 있도록하는

<a href="#" class="btn_prev"></a> 
      <a href="#" class="btn_next"></a> 

을 이전?

Answer 1

으로 caption demo

당 당신은 당신은 caption라는 클래스를 사용하는

클래스 사이클 자막으로 슬라이드 쇼 컨테이너에 빈 사업부를 포함하여 간단한 기본 캡션을 추가 할 수 있습니다 문서 당 cycle-caption 대신.

Answer 2

볼 아래의 CSS :

CSS

.caption { 
position: relative; 
top: 0; 
right: 0; 
color:#fff; 
background: #000; 
opacity: 0.7; 
height: 100% 
width: 300px; 
display:block; 
text-align:right; 
}