Bootstrap 4 fullscreen backgrounds and slideshows

Today we’re going to show you how to add fullscreen background images and slideshows to your Bootstrap 4 and Bootstrap 3 sites.

We’re going to be using an excellent little plugin called Backstretch to do the heavy Javascript work and then implement our own HTML data attributes to make triggering the fullscreen backgrounds easy and simple.

HTML

Include required files

First thing we’re going to do is include Backstretch in our HTML file, like Bootstrap does we’ll add this to the footer of our HTML page just before the closing body tag. We’ll also include our custom Javascript file called tutorial.js, it’s important this is included after Backstretch since we’ll be calling the Backstretch plugin from it.

  <!-- Backstretch plugin: http://srobbin.com/jquery-plugins/backstretch/ -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
  
  <!-- Our custom JS -->
  <script src="js/tutorial.js"></script>    
</body>

Trigger Backstretch

Next up we’ll add the markup we need to trigger Backstretch and any options/settings we want/need to pass.

We’ll use data-toggle="backstretch" to trigger Backstretch in our Javascript later and here’s the options we’re going to include: * data-backstretch-target="SELECTOR" – element to apply backstretch to [element requires height & width or to wrap other elements], if blank it will attach to the body tag, use self to attach to the calling element * data-backstretch-imgs="IMAGES" – a common separated list of images to use, multiple images will be made into a slideshow * data-opacity="OPACITY" – opacity value of the background image or images ranging from 1 to 9 * data-duration="MILLISECONDS" – the amount of time in between slides * data-fade="MILLISECONDS" – value that determines how quickly the next image will fade in

<div data-toggle="backstretch"
  data-backstretch-imgs="PATH_TO_IMAGE_1,PATH_TO_IMAGE_2,PATH_TO_IMAGE_3"></div>

We want this to show as the background for the fullscreen so include the above code right after your body tag, update the PATH_TO_IMAGE_ placeholders with the relative paths to your image or images. It also works with publicly accessible remote images.

NOTE: no gaps between the commas in the images list, this is important!


Box the page (optional)

This is optional but we’re going to wrap and box our page content (header, content & footer) in a container div so that the page background is visible:

<div class="container page-container">
  navbar
  header
  content
  footer
</div>

 


CSS

The CSS we’re adding is to control the opacity of the background images & slideshows (set via data-opacity tag) as well as a page-container which has a white semi-transparent background colour so we can see the background image(s) behind. We could also do the latter bit by tweaking the Bootstrap contextual backgrounds but we’ll cover that in another tutorial.

.backstretch-opacity-X .backstretch {
  opacity: 0.X;
}

backstretch-opacity-X is applied to the html tag via Javascript to allow you adjust other elements on the page, there’s also a .has-backstretch class added too to tell you Backstretch is loaded on the page.

.page-container {
  backgroud-color: white;
  opacity: 0.7;
}

Javascript

Now for the magic that glues everything together, post any questions in the comments but it should be obvious with the commenting:

$(document).ready(function() {
  
  // Check Backstretch is loaded
  if (!jQuery().backstretch) {
    return;
  }
  
  // Find all data-toggle="backstretch" elements
  var backstretches = $('[data-toggle=backstretch]');// Selector
  backstretches.each(function() {
    var backstretchEl = $(this);
    var backstretchTarget = backstretchEl.data('backstretch-target') || null;
    var backstretchImgs = [];
    var backstretchOpacity = backstretchEl.data('opacity') || null;
    var backstretchSettings = {
      fade: 750,
      duration: 4000
    };
  
    // Get images from element
    $.each(backstretchEl.data('backstretch-imgs').split(','), function(k, img) {
      backstretchImgs[k] = img;
    });
  
    if (backstretchImgs) {
      $('html').addClass('has-backstretch');
      
      // Opacity: add CSS to wrapper
      if (backstretchOpacity !== null) {
        $('html').addClass('backstretch-opacity-'+ backstretchOpacity);
      }
      
      // Merge in any custom settings
      backstretchSettings = $.extend({}, backstretchSettings, backstretchEl.data());
  
      // block level element
      if (backstretchTarget !== null) {
        if (backstretchTarget === 'self') {
          backstretchTarget = backstretchEl;
        }
        else {
          if ($(backstretchTarget).length > 0) {
            backstretchTarget = $(backstretchTarget);
          }
        }
        backstretchTarget.backstretch(backstretchImgs, backstretchSettings);
      }
      else {
        $.backstretch(backstretchImgs, backstretchSettings);
      }                 
    }
  });
  
});

 

End Product

And there we go, click the image for a working demo, enjoy!

Credits

License

Use and abuse at will for personal & commercial projects although we’d love a link back to this page if you do use it 🙂

No Coments

    Leave a Reply

    Your email address will not be published. Required fields are marked *