BX Slider Load JS Properly

archived 🗄
1

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?

2

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…

3

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.

4

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