您好我正在为网站制作菜单卡。
我确实制作了一个滑块，因此菜单卡确实有不同的类别，但有些类别的内容比其他类别更多。
所以它使div更大，但它使得div更大致。
您可以实时查看此页面：http://toontjeindestad.coersonline.nl/，然后向下滚动到带箭头的菜单。
我尝试给div一个转换，但这也不起作用。
这是我的滑块/菜单的HTML代码。
<div id="text-carousel" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
<?php if( have_rows('voorgerechten') ): ?>
<?php while( have_rows('voorgerechten') ): the_row();
// vars
$gerechtvoorgerecht = get_sub_field('gerecht');
$prijsvoorgerecht = get_sub_field('prijs');
$omschrijvingvoorgerecht = get_sub_field('omschrijving');
?>
<div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
<h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtvoorgerecht?></h3><br>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingvoorgerecht?></i></p>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>€ <?php echo $prijsvoorgerecht?></i></p><br>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
<?php if( have_rows('vleesgerechten') ): ?>
<?php while( have_rows('vleesgerechten') ): the_row();
// vars
$gerechtvleesgerecht = get_sub_field('gerecht');
$prijsvleesgerecht = get_sub_field('prijs');
$omschrijvingvleesgerecht = get_sub_field('omschrijving');
?>
<div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
<h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtvleesgerecht?></h3><br>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingvleesgerecht?></i></p>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>€ <?php echo $prijsvleesgerecht?></i></p><br>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="item" data-id="1">
<div class="carousel-content">
<div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
<?php if( have_rows('visgerechten') ): ?>
<?php while( have_rows('visgerechten') ): the_row();
// vars
$gerechtvisgerecht = get_sub_field('gerecht');
$prijsvisgerecht = get_sub_field('prijs');
$omschrijvingvisgerecht = get_sub_field('omschrijving');
?>
<div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
<h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtvisgerecht?></h3><br>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingvisgerecht?></i></p>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>€ <?php echo $prijsvisgerecht?></i></p><br>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
<?php if( have_rows('soepen') ): ?>
<?php while( have_rows('soepen') ): the_row();
// vars
$gerechtsoep = get_sub_field('gerecht');
$prijssoep = get_sub_field('prijs');
$omschrijvingsoep = get_sub_field('omschrijving');
?>
<div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
<h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtsoep?></h3><br>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingsoep?></i></p>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>€ <?php echo $prijssoep?></i></p><br>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
<?php if( have_rows('nagerechten') ): ?>
<?php while( have_rows('nagerechten') ): the_row();
// vars
$gerechtnagerecht = get_sub_field('gerecht');
$prijsnagerecht = get_sub_field('prijs');
$omschrijvingnagerecht = get_sub_field('omschrijving');
?>
<div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
<h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtnagerecht?></h3><br>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingnagerecht?></i></p>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>€ <?php echo $prijsnagerecht?></i></p><br>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
<?php if( have_rows('koffieenlekkers') ): ?>
<?php while( have_rows('koffieenlekkers') ): the_row();
// vars
$gerechtkoffieenlekkers = get_sub_field('gerecht');
$prijskoffieenlekkers = get_sub_field('prijs');
$omschrijvingkoffieenlekkers = get_sub_field('omschrijving');
?>
<div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
<h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtkoffieenlekkers?></h3><br>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingkoffieenlekkers?></i></p>
<p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>€ <?php echo $prijskoffieenlekkers?></i></p><br>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#text-carousel" data-slide="prev" onclick="">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#text-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
谢谢你的时间！
答案 0 :(得分：0)
我认为您正在使用boostrap carousal尝试在页面中添加以下代码
$(document).ready(function () {
$('.carousel').carousel({
interval: 5000
}).on('slide.bs.carousel', function (e) {
var nextH = $(e.relatedTarget).height();
$(this).find('.active').parent().animate({ height: nextH }, 500);
});
});
答案 1 :(得分：0)
您可以使用此js代码获得滑块高度平滑度 你可以在这里看到Animate height change on Bootstrap 3 Carousel
$('.carousel').carousel({
interval: 5000
}).on('slide.bs.carousel', function (e) {
var nextH = $(e.relatedTarget).height();
console.log(nextH)
console.log( $(this).find('.active.item').parent() )
$(this).find('.active.item').parent().animate({
height: nextH
}, 500);
});