toutes mes fenêtres dans un curseur jquery alignent verticalement plutôt que horizontalement

Question

Je suis complètement nouveau à jquery et trouvé ce plugin pour un curseur d'image. Cela fonctionne pour les images, mais j'ai ajouté du texte à côté de mes images pour la description. Après que j'ai fait cela, ma première image et la description respective apparaissent bien sur le premier panneau, mais les deux images suivantes n'apparaissent pas puisqu'elles sont alignées verticalement plutôt qu'horizontalement. Ce qui signifie que lorsque le premier curseur cède la place à la suivante, toutes les images suivantes sous la première image glissent aussi avec la première laissant les autres panneaux vides. Voici un link. Comment puis-je faire apparaître toutes les images dans leurs diapositives respectives?

Voici mon jquery:

$(document).ready(function() { 
//Show the paging and activate its first link 
$(".paging").show(); 
$(".paging a:first").addClass("active"); 

//Get size of the image, how many images there are, then determin the size of the image reel. 
var imageWidth = $(".window").width(); 
var imageSum = $(".image_reel img").size() 
var imageReelWidth = imageWidth * imageSum; 

//Adjust the image reel to its new size 
$(".image_reel").css({'width' : imageReelWidth}); 

//Paging and Slider Function 
rotate = function(){ 
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide 
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide 

    $(".paging a").removeClass('active'); //Remove all active class 
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

    //Slider Animation 
    $(".image_reel").animate({ 
     left: -image_reelPosition 
    }, 500); 

}; 

//Rotation and Timing Event 
rotateSwitch = function(){ 
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds 
     $active = $('.paging a.active').next(); //Move to the next paging 
     if ($active.length === 0) { //If paging reaches the end... 
      $active = $('.paging a:first'); //go back to first 
     } 
     rotate(); //Trigger the paging and slider function 
    }, 7000); //Timer speed in milliseconds (7 seconds) 
}; 

rotateSwitch(); //Run function on launch 

//On Hover 
$(".image_reel a").hover(function() { 
    clearInterval(play); //Stop the rotation 
}, function() { 
    rotateSwitch(); //Resume rotation timer 
}); 

//On Click 
$(".paging a").click(function() { 
    $active = $(this); //Activate the clicked paging 
    //Reset Timer 
    clearInterval(play); //Stop the rotation 
    rotate(); //Trigger rotation immediately 
    rotateSwitch(); // Resume rotation timer 
    return false; //Prevent browser jump to link anchor 
}); 
}); 

Voici mon css pour le curseur:

.window, .single{ 
position: relative; 
height: 400px; 
width: 880px; 
margin-top: 10px; 
overflow: hidden; /*--Hides anything outside of the set width/height--*/ 
background-color: #000000; 

} 

ul.image_reel { 
    position: relative; 
} 

ul.image_reel li { 
    color: #ffffff; 
    overflow:hidden; 
    padding: 10px 0 10px 10px; 
    position: relative; 
} 


ul.image_reel h1, ul.image_reel p{ 
    padding-left: 10px; 
    width: 260px; 
    margin-left: 580px; 
} 


ul.image_reel img { 
    float: left; 
} 

ici est mon code html:

<div class="window"> 

       <ul class="image_reel"> 
        <li> 
         <img src="images/first.jpg" alt="" /> 
         <h1>What do we develop?</h1> 
        <p>Obsia develops and manufactures natural stone and road sealers to preserve it forever.<br /> 
        <br />All your projects, whether internal or external, are made stain-proof, dust-proof and weather-proof. <br /> 
        <br /></p> 
        </li> 

        <li> 
         <img src="images/second.jpg"> 
         <h1>How does it work?</h1> 
         <p>The sealer penetrates the stone upto a depth of 6mm completely sealing the stone. The liquid mimics the natural crystalline structure of the stone improving the reflectivity. <br /> <br />The binder hardens and strengthens the structure of the stone including the weaker spots.</p> 
        </li> 
        <li><img src="images/third.jpg"></li> 
        <li></li> 
       </ul><!-- end of image_reel --> 

     </div><!-- end of window --> 

      <div class="paging"> 
       <a href="#intro" rel="1">1</a> 
       <a href="#problems" rel="2">2</a> 
       <a href="#solution" rel="3">3</a> 
       <a href="#savings" rel="4">4</a> 
      </div><!-- end of paging --> 
    </div> 

Toute aide ou réponse serait apprécié.

Answer 1

peut-être vous avez besoin:

ul.image_reel { 
    float: left; 
}