How to Instantiate BX Slider
Getting BX Slider up and running in your theme or template is easy. Just add some data attributes to a div or element wrapping a bunch of images or content elements that you want to appear as slides and, like magic, the slideshow will initialize. Below is an example of the markup and data attributes necessary.
<div class="clearfix invisible" data-init="slider"> <div class="slide-1"></div> <div class="slide-2"></div> <div class="slide-3"></div> <div class="slide-4"></div> </div>
BX Slider Settings
When you use the above data attribute to initialize the slider (
data-init="slider") it will instantiate bx-slider with the default settings we established in our Membership plugin. But you can override these default settings just by adding additional data attributes to the same div with the data-init. Below is an example of changing the slide width to 200px on this single instance of the slider.
<div class="clearfix invisible" data-init="slider" data-slide-width="200"> <div class="slide-1"></div> <div class="slide-2"></div> <div class="slide-3"></div> <div class="slide-4"></div> </div>
All BS Slider settings are available to set using these data attributes. Refer to the BS Slider options page for a complete list of available options. Many of the options are in camel case format, like
infiniteLoop for example. But html / data attributes cannot use camel case. In these instances you’ll need to use a dash to split the words. So for overriding the infiniteLoop setting use
data-infinite-loop=0 to turn off infinite loop or
data-infinite-loop=1 to turn it on.