我有一个使用引导程序转盘的网站。这是我的代码：
<div id="slider">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $key => $image) {
$active = $key == 0 ? 'active' : '';
echo 'item" data-interval="1000">';
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
echo '</div>'; }
}
?>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
这是我的jQuery:
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 1000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
(function($) {
fakewaffle.responsiveTabs(['xs', 'sm']);
});
});
我将interval:5000更改为interval:1000，因为加载页面时滑块显示项目时会有延迟。由于将间隔更改为1000，滑块加载完美而快速，但是现在需要放慢幻灯片项目的速度，因为它们在幻灯片之间的速度太快。
我认为问题是，直到间隔之后，幻灯片/图像才会处于"活动"状态。如何在页面加载时自动为第一个幻灯片项目的上述代码添加活动状态，而不是等到间隔之后？
如有任何帮助，将不胜感激
以下是我用来修复问题的代码：
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 3000
});
$('#myCarousel .item:first').addClass('active');
});