jQuery Carousel Slider

Question

Я использую simple.carousel.js для простого маленького слайдера, где есть изображение и некоторый текст. Как вы знаете, в этом плагине используется тег <ul> для перемещения элементов <li>. Вы можете установить ширину и высоту carouselslider в JavaScript как

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

Если вы не установите эти размеры в JavaScript, то .js файл имеет размеры по умолчанию для установки. Но я хочу, чтобы этот плагин имел разные размеры для каждого элемента <li>, потому что в нем больше изображения или большего текста. Если вы превысите эту высоту, потому что текст имеет 250px height вместо 200px, что является пределом для слайдера, оно не отображает его. Любые идеи, как в этом слайдере элементы <li> могут получить размеры внутренних div? Заранее спасибо :)

PS. Код html выглядит примерно так:

<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

Почему вы не используете максимальную высоту для карусели? Максимальная высота элемента li. Потому что я предполагаю, что есть контент под карусели, и если вы будете реализовывать его, как вы говорите, контент внизу карусели «подпрыгнет», когда вы будете иметь разные высоты.

Если вы все еще хотите этого поведения, я рекомендую вам посмотреть, есть ли набор overflow:hidden для элемента ul, который, как я полагаю, установлен на carousel.js, и измените его в файле css с помощью overflow:visible !important.

Answer 2

Просто удалите overflow:hidden за slider и используйте увеличенное изображение.

Updated fiddle