jQuery Bootstrap Background Carousel

A customisation to Bootstrap Carousel which updates a whole page background image on automatic play using jQuery

Requirements

• jQuery
• bootstrap.css
• bootstrap.js

Installation

• 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>

Usage

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>