I have implemented the BX slider to one of my module. After implementing the BX slider, I can see the script and CSS for BX-slider have loaded when i look into the developer tools. However, the Bx slider is not visible and also the functionality is not working on the frontend.
I want to display like below:
Below are the code I'm using:
Template file:
<div id="collapse" class="collapse prolist-compare-corosel">
<div class="compare-arrow"></div>
<div class="overslide" id="overslide">
<section class="overallbx">
<ul id="compare-items" class="product-items product-items-names bxfrcmp" data-bind="foreach: compareProducts().items">
<li class="product-item">
<div class="bxroundup">
<div class="bxcolumnup">
<div class="bxcardup">
<div class="visual">
<input type="hidden" class="compare-item-id" data-bind="value: id"/>
<a href="#" data-bind="attr: {'data-post': remove_url}" title="<?= /* @escapeNotVerified */ __('Remove This Item') ?>" class="action delete cancelclose remove-slide" >
<span><?= /* @escapeNotVerified */ __('×') ?></span>
</a>
<a href="" class="imagechange">
<img data-bind="attr: {'src' : image_src}" alt="">
</a>
</div>
<div class="products-info">
<p class="model-name"><a data-bind="attr: {href: product_url}, html: name" class="product-item-link productword"></a></p>
<div class="price-area rPrice">
<div class="purchase-price">
<div class="price">$29,999.99</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
</div>
Script:
jQuery(document).ready(function() {
jQuery('.bxfrcmp').bxSlider({
minSlides: 3,
maxSlides: 3,
slideWidth: 960,
pager: false,
moveSlides: 1,
touchenabled:true,
infiniteLoop: false,
});
});
Any help will be appreciated!
After tried as suggested by Ben Crook: