Tool Bar
Webriq logo
Notifications

Background Slideshow

A simple fullscreen background slideshow with auto-play and controls to navigate and pause.

A fullscreen background slideshow with autoplay functionality.

JADE & HTML


ul#cbp-bislideshow.cbp-bislideshow
  li
    img(src='images/1.jpg', alt='image01')
  li
    img(src='images/2.jpg', alt='image02')
  li
    img(src='images/3.jpg', alt='image03')
  li
    img(src='images/4.jpg', alt='image04')
  li
    img(src='images/5.jpg', alt='image05')
  li
    img(src='images/6.jpg', alt='image06')
#cbp-bicontrols.cbp-bicontrols
  span.cbp-biprev
  span.cbp-bipause
  span.cbp-binext

<ul id="cbp-bislideshow" class="cbp-bislideshow">
  <li><img src="images/1.jpg" alt="image01"/></li>
  <li><img src="images/2.jpg" alt="image02"/></li>
  <li><img src="images/3.jpg" alt="image03"/></li>
  <li><img src="images/4.jpg" alt="image04"/></li>
  <li><img src="images/5.jpg" alt="image05"/></li>
  <li><img src="images/6.jpg" alt="image06"/></li>
</ul>
<div id="cbp-bicontrols" class="cbp-bicontrols">
  <span class="cbp-biprev"></span>
  <span class="cbp-bipause"></span>
  <span class="cbp-binext"></span>
</div>

JavaScript


script(src='js/modernizr.custom.js')
script(src='js/jquery.imagesloaded.min.js')
script(src='js/cbpBGSlideshow.min.js')
script.
  $(function() {
  cbpBGSlideshow.init();
  });

  <script src="js/modernizr.custom.js"></script>
  <script src="js/jquery.imagesloaded.min.js"></script>
  <script src="js/cbpBGSlideshow.min.js"></script>
  <script>
    $(function() {
      cbpBGSlideshow.init();
    });
  </script>

CSS


link(rel='stylesheet', type='text/css', href='assets/css/component.css')




  <link rel="stylesheet" type="text/css" href="assets/css/component.css" />