Question

长期读者，第一次海报。

我最近开始学习使用bootstrap。

我试图让一个Bootstrap旋转木马预加载显示一个旋转轮（或类似的效果）。

我已经将我想要的效果拼凑在一起，我的前四张图像“轻弹”并且卡罗尔停在我的最终图像上 - 但我无法管理的是将整个旋转木马内容加载到旋转后面旋转木马开始前的轮子。

这是我正在进行的工作 - http://maxsendak.com/test/pu_v2/max.html - 所以你可以看到，它是整个标题标记需要加载'正在加载'才能触发轮播脚本并开始轻弹幻灯片。

<header id="myCarousel" class="carousel carousel-fade" data-ride="carousel" data-wrap="false">

<!-- Wrapper for Slides -->
<div class="carousel-inner">
<!-- START big image panel --><div class="item active">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/1.jpg');">
<div class="text-vertical-center people_text_over_image">

</div>
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/2.jpg');">

</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/4.jpg');">

</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/3.jpg');">

</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/5.jpg');">
<div class="text-vertical-center people_text_over_image">
<h1>Max Wilson</h1>
<h3>Creative</h3>
<br>
<a href="#about" class="btn btn-dark btn-lg">See More</a>
</div>
</div>
</div><!-- END big image panel -->

</div>

</header>

在所有内容都加载后，用于触发轮播的脚本需要触发。

 <script> $('.carousel').carousel({ interval: 500, //changes the speed pause: "none", }) </script>

通常情况下，当我正在学习处理这些事情时，我认为可能是因为我错过了一些简单的事情 - 这是不是这样？

Answer 1

删除data-ride =“carousel” - 这是触发轮播在页面加载时开始移动的原因。相反，只要您准备好

，就可以使用javascript手动启动轮播

$('.carousel').carousel()

注意 - 如果您想等到图像全部加载完毕。你可以把这个手册放在像这样的窗口加载

$(window).load(function() {
     // + any other carousel related stuff that has to wait for the images to complete loading
     $('.carousel').carousel()
})

Answer 2

jQuery 解决方案是将 d-block 添加到所有 .carousel-item 元素，并将其放在底部，在 <body> 标记之后：

$(window).on("load",function() {
     $('.carousel-item').removeClass("d-block");
})

预加载整个Bootstrap轮播

2 个答案: