이미지 캐 러셀 상단에 텍스트 추가

Question

저는 사용중인 jquery 캐 러셀에서 슬라이드 상단에 텍스트의 다른 단락을 표시하려고합니다. 사용중인 html이 아래에 있습니다.

<div class="slider"> 
    <ul class="slides"> 
     <li class="slide"> 
      <p>example text to sit on top of carousel and change when you click 
      through carousel images</p> 
      <img src="library/images/item1.jpg" class="imgdivide"> 
     </li> 
     <li class="slide"> 
      <img src="library/images/item2.jpg" class="imgdivide"> 
     </li> 
     <li class="slide"> 
      <img src="library/images/item1.jpg" class="imgdivide"> 
     </li> 
     <li class="slide"> 
      <img src="library/images/item2.jpg" class="imgdivide"> 
     </li> 
    </ul> 
</div> 

그리고 이것은 내가 지금 가지고있는 스타일링입니다.

.slider { 
    position: relative; 
    width: 100%; 
    height: 50%; 
    overflow: hidden; 
} 

.slides { 
    width: 100%; 
    height: 50%; 
    overflow: hidden; 
} 

.slide p { 
    width: 100%; 
    display: block; 
    font-family: Georgia,"Times New Roman", Times, serif; 
    size:16px; 
    line-height: 20px; 
    color: #FFF; 
} 

.slide { 
    width: 100%; 
    float: left; 
} 

누구든지 에이스가된다면 도움이 될 것입니다.

Answer 1

일부 Z- 색인이있는 클래스로 텍스트를 시험해보십시오. 이 같은 :

<li class="slide"> 
     <p class="text-top-image">example text to sit on top of carousel and change when you click 
     through carousel images</p> 
     <img src="library/images/item1.jpg" class="imgdivide"> 
    </li> 

그리고이처럼 CSS :

.text-top-image{ 
    z-index: 100; 
}