0

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:

enter image description here

But I'm getting as below: enter image description here

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 */ __('&times;') ?></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:

enter image description here

enter image description here

enter image description here

2 Answers 2

0

As this HTML is rendered via Knockout JS it's likely that your script is loading before the elements have rendered, to check that just add console.log(jQuery('.bxfrcmp')) to your script and see what it returns.

I would handle this adding a method to the Knockout script that initialises your slider, and use the afterAdd event to call it.

You would end up with something like this:

HTML

<ul id="compare-items" class="product-items product-items-names bxfrcmp" data-bind="foreach: compareProducts().items, afterAdd: initSlider">
    ...
</ul>

JS

...
initSlider: function() {
  jQuery(document).ready(function() {
    jQuery('.bxfrcmp').bxSlider({
      minSlides: 3,
      maxSlides: 3,
      slideWidth: 960,
      pager: false,
      moveSlides: 1,
      touchenabled:true,
      infiniteLoop: false,
    });
  });
}
...
1
  • Thanks. I have tried as you suggested. At first, I have added the console.log(jQuery('.bxfrcmp')) and got the console data. For your reference, I have added the image at question. After that as you point out, I have added the initSlider function and got image at least. However, it shows some error. I have added the screenshot which has the error I got at question. Could you please help with this?
    – deepa pwc
    Oct 18, 2019 at 11:23
0

Use owl carousel instead bx-slider. it is easy to use and manage the code. When we develop projects we use

<referenceContainer name="before.body.end">
                <block class="Magento\Framework\View\Element\Template" name="extrajs" template="Magento_Theme::html/extrajs.phtml" after="absolute_footer" />
                <block class="Magento\Framework\View\Element\Template" name="extracss" template="Magento_Theme::html/extracss.phtml" after="absolute_footer" />
</referenceContainer>

so we dont clean cache everytime whenever we modify/write code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.