Installing Slider on sites with head.js

If your website is using head.js (template from TribeVita) or you would like to use head.js on your website, please follow the following instructions instead of the default instructions:

Step 1. Add the CSS file to the head of the HTML document.

<link rel="stylesheet" href="/bcas-homepage-slider/slider.css">
 

Step 2. Add the content holder where you want to place the slider. If you're using multiple sliders, you can find all of your content holders listed on the Manage Sliders tab of this app.

{module_contentholder, name="_SliderHTML"}

Step 3. Include jQuery and slider scripts in your head.js call, found in the head of your document (if it is not there already)

<script type="text/javascript">head.js(
  'https://code.jquery.com/jquery-1.9.1.js',
  '/javascript/scripts.js',
  '/bcas-homepage-slider/jquery.bxslider.min.js',
  'http://a.vimeocdn.com/js/froogaloop2.min.js?14ee0-1383949323'
  );
</script>  
 

This example above assumes that there is also a custom script file called in your head function but this file is not needed for the slider and should be removed from the code. Files referenced in the head.js function should be separated by a comma but the last element should not have a comma after it.

Step 4. Add the following code to the head of the document after your call to head.js.

<script>
  head.ready(function(){
   
  (function() {
  var nocache = new Date().getMilliseconds();
  $.getJSON('/bcas-homepage-slider/options.json?'+nocache, function(options) {
  sliderPlugin = $('#slider').bxSlider(options);
  });
  })();
  });
</script>  

Still need help? Contact Us Contact Us