How to add bxslider to Sage

sage
1

First I had installed bxslider, then found the readme.txt within that notified me of it’s depreciated state, so:

bower uninstall bxslider -save

and

bower install dw-bxslider-4 -save

Now I added a few images to templates/header.php in the bxslider list (<ul class="bxslider"> etc).

And included the initialization in main.js

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

And ran gulp styles. But I’m getting console error “.bxSlider() is not a function” , so apparently a step was missed in loading the bxslider library into the page. And I can see that it’s not included in the dist/scripts directory

Does it need to be explicitly added via Asset builder?

2

Nope. It’s included as part of dist/main.js, unless otherwise directed (in assets/manifest.json, i think).

All there and working, except that the styles/images files don’t exist in the right place. Had seen that mentioned in a different discourse…

3

Here it is: not finding ajax-loader.gif

And what @ben recommends is to 1. move or copy the images into assets/images and 2. either change the CSS in the bower_component or override the css within the theme CSS.

So in this case I copied the offending entries from bower_components/bxslider-4/src/css/jquery.bxslider.css and added them to assets/styles/layouts/_header.css, as this is being used in the themes header (if (is_front_page())).

/* Override image locations to match Sage structure*/
.bx-wrapper .bx-loading {
    background: url('../images/bx_loader.gif') center center no-repeat #ffffff;
}

.bx-wrapper .bx-prev {
    background: url('../images/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
    background: url('../images/controls.png') no-repeat -43px -32px;
}

Nice, Sage.