A customisation to Bootstrap Carousel which updates a whole page background image on automatic play using jQuery
- jQuery
- bootstrap.css
- bootstrap.js
- Clone repo
git clone https://github.com/whitewaterdesign/bootstrap-carousel-bkg.git
- Use the cdn
<script src="https://cdn.jsdelivr.net/gh/whitewaterdesign/bootstrap-carousel-bkg/bcb.js"></script>
Add requirements
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Add stylesheet <link rel="stylesheet" href="whitewaterdesign/bootstrap-carousel-bkg/bcb.css">
Add bcb script <script src="whitewaterdesign/bootstrap-carousel-bkg/bcb.js"></script>
Create a bootstrap carousel with id #bcb-carousel
and js_image="[url]"
parameters on .carousel-item
divs for background images
<div id="bcb-carousel" class="carousel slide carousel-fade" data2-ride="carousel"> <div class="carousel-inner"> <!-- Slide 1 --> <div id="page1" class="carousel-item active" js_image="[url]"> <div class="inner_item min-vh-100">[content]</div> </div> <!-- /Slide 1 --> <!-- Slide 2 --> <div id="page2" class="carousel-item" js_image="[url]"> <div class="inner_item min-vh-100">[content]</div> </div> <!-- /Slide 2 --> </div> </div>