Я использую simple.carousel.js для простого маленького слайдера, где есть изображение и некоторый текст. Как вы знаете, этот плагин использует <ul>
для <li>
элементов <li>
. Вы можете установить ширину и высоту карусели-листа в 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>
Просто удалите overflow:hidden
для slider
и используйте большее изображение.
Почему вы не используете максимальную высоту для карусели? Максимальная высота элемента li. Потому что я предполагаю, что есть контент под карусели, и если вы будете реализовывать его, как вы говорите, контент внизу карусели "подпрыгнет", когда вы будете иметь разные высоты.
Если вам все еще нужно это поведение, я рекомендую вам посмотреть, есть ли overflow:hidden
набор для элемента ul, который, как я полагаю, я задал carousel.js и изменил его в вашем файле css с overflow:visible !important
.