EasySlider 1.7 용 JavaScript의 영향을받는 CSS

Question

EasySlider 1.7을 사용하여 슬라이더로 멋진 오버레이 효과를 얻으려고합니다. 여기에는 이미지뿐만 아니라 이미지를 나타내는 텍스트도 포함되어야합니다. 이제 필자는 필요한 곳에 페이지의 텍스트를 정렬하는 데 어려움을 겪고 있습니다. 텍스트가 앉아 생각된다 홈 페이지, 메인 스크롤 이미지에 검은 색 오버레이를 볼 수있는 부분입니다

http://intranet.streamflame.com

이다. 이제 텍스트를 스크롤하는 코드를 없애면 텍스트는 예상 한 위치에 앉습니다. 그러나 동시에 텍스트를 스크롤하는 스크립트를 추가하자마자 텍스트가 사라지는 것으로 보입니다.

다음은 나의 코드입니다.
HTML :

<div class="filler"> 
    <div class="filler-picture"> 
    <div class="filler-img"> 
    <ul>{% for project in rotations %} 
     <li><img src="{% thumbnail project.key_image.get_absolute_url 559x361 crop,upscale %}" width="559" height="361" alt="{{ project.title }}" /></li> 
    {% endfor %} 
</ul> 
</div> 
<div class="filler-mask"> 
<img src="{{ MEDIA_URL }}img/filler.png" alt="filler" /> 
</div> 
<div class="filler-text"> 
<ul> 
<li> 
    <span class="filler-text-left">WaterTiger</span> 
    <span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span> 
</li> 
<li> 
    <span class="filler-text-left">Dragonfly</span> 
    <span class="filler-text-right">Project Dragonfly is a test project whilst we get all the site together, call it a filler if you must, there is no project dragonfly your only dreaming.</span> 
</li> 
<li> 
    <span class="filler-text-left">Spacemunch</span> 
    <span class="filler-text-right">Project Spacemunch is a test project whilst we get all the site together, call it a filler if you must, there is no project Spacemunch your only dreaming.</span> 
</li> 
</ul> 

CSS :

.filler { 

    position: relative; 
     margin-left:20px; 
     height:361px; 
     width:559px; 
     float:left; 

} 

.filler-mask { 
    position: absolute; 
    left:0; top:0; 
    height:361px; 
    width:559px; 
    z-index: 100; 
} 

.filler-img{ 
    position: absolute; 
    left:0; top:0; 
    height:361px; 
    width:559px; 
    z-index: 50; 

} 

.filler-text { 

     width: 558px; 
     height: 68px; 
     position: absolute; 
     z-index: 200; 
     color: #fff; 

} 

.filler-text li { 

     list-style-type: none; 
     z-index: 1000; 

} 

.filler-text-left { 

     width: 169px; 
     float: left; 
     height: 48px; 
     padding: 10px; 
     font-size: 18pt; 
     font-weight: 100; 

} 
.filler-text-right { 

      width: 340px; 
     float: right; 
     height: 48px; 
     padding: 10px; 
     font-size: 10pt; 
} 

EasySlider 자바 스크립트 :

<script type="text/javascript"> 
     $(document).ready(function(){ 
     $(".filler-text").easySlider({ 
     auto: true, 
     continuous: true, 
     speed: 1800, 
     pause: 5000, 
     nextId: "next2", 
     prevId: "prev2" 
     }); 
     $(".filler-img").easySlider({ 
     auto: true, 
     continuous: true, 
     speed: 1800, 
     pause: 5000, 
     nextId: "next2", 
     prevId: "prev2" 
     }); 

     }); 
</script> 

참고 : 이미지의 스크립트 아래에 텍스트에 대한 스크립트를 넣으려고했으나 모양이 변경되지 않았습니다.
누군가가 도움을 주길 바랍니다. 텍스트를 필러 슬라이더 효과를 추가

Answer 1

그것은 필러 텍스트의 높이를 복용하지 안에 당신의 리튬의 결과이다 JQuery와

에 의해 속성을 설정합니다. 그래서 첫 번째 솔루션은 사전 모드 또는 간단한에 clearfix을 추가하여 리는 높이를 취할 수 있도록하는 것입니다 : 그래서 보이는 각

<span class="filler-text-left">WaterTiger</span> 
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span> 

후

<div style="clear: both;"></div> 

을 같은 : 마지막으로

<span class="filler-text-left">WaterTiger</span> 
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span> 
<div style="clear: both;"></div> 

그리고 필러 텍스트의 상단 위치를 관리하십시오.