A simple fullscreen background slideshow with auto-play and controls to navigate and pause.
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>
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>
link(rel='stylesheet', type='text/css', href='assets/css/component.css')
<link rel="stylesheet" type="text/css" href="assets/css/component.css" />