CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
a1652
a1652

Reputation: 103

Preload an entire Bootstrap carousel

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

Answers (2)

Jack Scandall
Jack Scandall

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

potatopeelings
potatopeelings

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

Related Questions