EasySlider 1.7 용 JavaScript의 영향을받는 CSS

StackOverflow https://stackoverflow.com/questions/3211235

  •  13-09-2020
  •  | 
  •  

문제

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

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

참고 : 이미지를위한 스크립트 아래의 텍스트에 대한 스크립트를 넣으려고했는데, 이것은 그것을 모습에 변화가 없습니다.
누군가가 도울 수 있기를 바랍니다.

도움이 되었습니까?

해결책

필러 텍스트에 슬라이더 효과를 추가하면 jquery로 속성을 설정합니다.

Biller-Text 내부의 LI의 결과는 높이를 취하지 않습니다.따라서 첫 번째 해결책은 사전 모드 또는 간단한 클리어 픽스를 추가하여 LI를 높이를 취하는 것입니다. 

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

다음과 같습니다 : 

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

및 마지막으로 필러 텍스트의 최상위 위치를 관리

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top