Roots Discourse

BX Slider Load JS Properly

I have created page-home.php to make a custom homepage. with code

    <?php while (have_posts()) : the_post(); ?>
      <?php get_template_part('templates/page', 'header'); ?>
      <?php get_template_part('templates/content', 'page-home'); ?>
<?php endwhile; ?>

I also added templates/content-page-home.php to generate some unique content for home:

<ul class="bxslider">
  <li><img src="http://placehold.it/350x150" /></li>
  <li><img src="http://placehold.it/350x150" /></li>
  <li><img src="http://placehold.it/350x150" /></li>
  <li><img src="http://placehold.it/350x150" /></li>
</ul>
<?php the_content(); ?>
<?php wp_link_pages(array('before' => '<nav class="pagination">', 'after' => '</nav>')); ?>

Content is loaded, but BX Slider is not making it slide nor are the images all neatly displayed in a slider. I added the plugin to assets/js/plugins/bxslider-4 and I ran grunt dev. So I made a change to grunt.js

    var jsFileList = [
        'assets/vendor/bootstrap/js/transition.js',
         -----
        'assets/js/plugins/bxslider-4/*.js',
        'assets/js/plugins/bxslider-4/plugins*.js',
        'assets/js/_*.js'
      ];

and added all the JS and ran grunt dev again and the continued using grunt watch. Last typo change was shown:

Running "watch" task
Waiting...
>> File "Gruntfile.js" changed.
Running "jshint:all" (jshint) task
>> 2 files lint free.

Running "concat:dist" (concat) task
File assets/js/scripts.js created.

Done, without errors.


Execution Time (2014-11-16 11:41:50 UTC)
loading tasks    5ms  ▇▇▇ 3%
jshint:all     161ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 83%
concat:dist     29ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 15%
Total 195ms

Completed in 1.650s at Sun Nov 16 2014 12:41:50 GMT+0100 (CET) - Waiting...
>> File "assets/js/scripts.js" changed.
Completed in 0.000s at Sun Nov 16 2014 12:41:50 GMT+0100 (CET) - Waiting...

Still the slider does not work. What gives?

I saw now I also need to add

$(document).ready(function(){
  $('#bxslider').bxSlider();
});

Can anyone tell me where I can add this and keep the code clean? I could add it to content-home-page.php, but I do think a separate js or js collect all file would be better.

Update

Added it to _main.js as recommended here Where and how to include custom js? . Now is it loading although it will need more work as CSS does not seem to be loaded properly yet…

If you familiarize yourself with the DOM-Based Routing Method you linked too it will become clear how to trigger bxSlider.

As far as the css for BXSlider goes, you can enqueue it via the lib/scripts.php OR (what I do with bx) you can convert it to LESS which isn’t difficult since it’s minimal css, and then include it via main.less.

There are some upcoming Roots features to handle multiple vendor assets. Switch to the Gulp branch for a preview.