The default listing slider and slider used for additional images on listing detail pages of our products is BX Slider. We load and initialize the javascript and CSS for BX Slider using Require JS (because of our use of Require JS we do not enqueue the scripts for BX slider the standard WordPress way).
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.
