jQuery旋转木马滑块

Question

I'm using the simple.carousel.js for a simple small slider, where there is an image and some text. As you may know, this plugin uses the <ul> tag to slide the <li> elements. You can set the width and height of the carouselslider in javascript like

> $("ul.homecarouselslider").simplecarousel({
>     height:200,
>     width:160,
>     visible: 1,
>     auto: 25000,
>     next: $('.offerright'),
>     prev: $('.offerleft') });

If you dont set those dimensions in javascript, the .js file has default sizes to set. But i want this plugin to have different dimensions for each <li> element, because there is a larger image in it, or bigger text. If you exceed this height because the text has 250px height instead of 200px which is the limit for the slider, it doesnt display it. Any ideas how in this slider, the <li> elements can get the dimensions of the inner divs? Thank you in advance :)

PS. The html code is something like this:

<div id="offers">   
    <ul id="homecarouselslider" class="homecarouselslider" style="list-style-type:none;overflow:hidden;width:600px;height:190px;">    
         <li style="float:left;width:160px;height:190px;">
           <div id="offer1">
            <div id="offertitle"><?php echo $row['title']; ?></div>
            <img id="offerimg" src="<?php echo $row['picture1']; ?>">
                <div id="offerdesc">
                <div id="offerdesctext"><?php  echo $row['full_description']; ?>  </div>
                  <div  class="offerleft" id="offerleft"><img src="images/offerleft.png"> </div>
                  <div  class="offerleft" id="offerright"><img src="images/offerright.png"></div>   
                  <div id="offerbook">BOOK NOW</div>    
                        </div>  
                        </div>  
        </li>
    </ul>
</div>

Answer 1

Why won't you use a maximum height for the carousel? The maximum height of a li element. Because I'm assuming that there is content under the carousel, and if you would implement it as you say, the content at bottom of the carousel would 'bounce' when you hva different heights.

If you still want that behavior, I recomand you to see if there is an overflow:hidden set to ul element, that I thinks that i set by carousel.js, and change it in your css file with overflow:visible !important .

Answer 2

Just remove the overflow:hidden for slider and use a bigger image.

Updated fiddle