我在jQuery滑块中的所有窗口都垂直排列，而不是水平排列

Question

我对jquery完全陌生，并为图像滑块找到了此插件。 它适用于图像，但是我在图像旁边添加了文本以进行描述。 完成此操作后，我的第一个图像和相应的描述在第一个面板上显示得很好，但是随后的两个图像却没有显示出来，因为它们是垂直排列的，而不是水平排列的。 这意味着，当第一个滑块移到下一个滑块时，第一张图片下面的所有后续图像也会滑动，而第一张图片会滑动，而其他面板为空白。 这是一个链接 。 如何使所有图像显示在各自的幻灯片中？

这是我的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
});
});

这是我的滑块CSS：

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

这是我的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>

任何帮助或回应，将不胜感激。

Answer 1

也许您需要：

ul.image_reel { 
    float: left; 
}