CSS affecté par JavaScript pour EasySlider 1.7

Question

J'essaie d'obtenir un effet de recouvrement agréable avec un curseur en utilisant EasySlider 1.7. Cela inclut non seulement des images, mais aussi un texte qui représente l'image. Maintenant, j'ai du mal à aligner le texte sur la page où j'en ai besoin.

http://intranet.streamflamme.com

C'est la page d'accueil, la section où vous voyez la superposition noire sur l'image de défilement principale est l'endroit où le texte est censé s'asseoir. Maintenant, si je me débarrasse du code pour faire défiler le texte, le texte se trouve là où il est censé. Cependant, dès que j'ajouterais le script pour faire défiler le texte en même temps, il semble que le texte disparaisse.

Voici mon code.
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>

Remarque: J'ai essayé de mettre le script pour le texte sous le script de l'image, cela n'a aucun changement au regard de celui-ci.
En espérant que quelqu'un puisse aider.

Answer 1

Ajout d'effet de curseur au texte de remplissage définit ses propriétés à JQuery

C'est le résultat de votre LI à l'intérieur du texte de remplissage ne prenant pas sa hauteur.Donc, la première solution consiste à rendre la LI prendre sa hauteur en ajoutant Clearfix en mode préalable ou simple:

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

après chaque

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

Il ressemble donc à:

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

et enfin gérer la position supérieure de votre texte de remplissage