Reputation: 103
Long time reader, first time poster.
I have recently started learning to use bootstrap.
I am stuck trying to get the a Bootstrap carousel to preload showing a spinning wheel (or similar effect).
I have pieced together the effect I'm going for, my first four images 'flick through' and the carrousel stops on my final image – but what I can't manage is to have the entire carousel content load behind a spinning wheel before the carousel starts.
This is my work in progress – http://maxsendak.com/test/pu_v2/max.html – so you can see, it is the whole header tag that needs to load with a 'load in progress' before it fires the carousel script and starts flicking through the slides.
<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 to fire carousel needs to fire after everything is loaded.
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 500, //changes the speed
pause: "none",
})
</script>
As is often the case when I'm learning my way around these things, I think it might be that I am missing something simple – is this the case?
Upvotes: 1
Views: 6978
Reputation: 402
jQuery solution would be adding d-block
to all .carousel-item
elements, and placing this at the bottom, after <body>
tag:
$(window).on("load",function() {
$('.carousel-item').removeClass("d-block");
})
Upvotes: 0
Reputation: 41085
Remove the data-ride="carousel" - this is what triggers the carousel to start moving at page load. Instead you can start the carousel manually with javascript whenever you are ready with
$('.carousel').carousel()
Note - if you want to wait till your images have all loaded. You'd put this manual start in a window load like so
$(window).load(function() {
// + any other carousel related stuff that has to wait for the images to complete loading
$('.carousel').carousel()
})
Upvotes: 3