1

as i am new in the magento and i want help to add bxslider in the home page area.

I have added the widget-block from the admin to display the slider images.

Also I have added the js in default_head_block.xml file. but it does not working.

3 Answers 3

2

I found the solution after 1 day.

Perform below step to add bxslider in Magento 2

  1. Add the requirejs-config.js in your theme root directory with below code

    var config = { shim: { 'bxSlider': { deps: ['jquery'] } }, paths: { 'bxSlider': "js/bxslider" } };

  2. Add bxslider.js(Rename bxslider.min.js to bxSlider.js), Wrap your bxslider js code in the

    define([ "jquery" ], function(jQuery) { "use strict"; "Your bxslider js function goes here" });

  3. Add the bxSlider function in phtml file as below.

    <script type="text/javascript" xml="space"> require([ 'jquery', 'bxSlider' ], function($){ $(document).ready(function() { $('.slider').bxSlider( { controls: true }); }); }); </script>

  4. Please clear all the cache from admin. Also delete the "pub\static\frontend\Vendor_name\Theme_name"

Hard Refresh Your Store.

0

You have to edit your bxslider.js file

Wrap all the code between require function.

See the example given below.

require(['jquery'], function($) {
    // your bxslider js code
});
3
  • so you mean i need to add the jquery.bxslider.min.js code between above comment?
    – Dolar
    Sep 6, 2018 at 9:34
  • Yes. As of now, If you check console tab in your browser, there will be an error like 'bxslider is not a function'. You have to require jquery first. Try my answer and let me know if it works or not. Sep 6, 2018 at 9:41
  • require([ 'jquery', ], function ($) { 'use strict'; jquery(".slider").bxSlider( { controls: true } ); }); I have put this code in logo.phtml but still not working. Also i have load the jquery.bxslider.min.js in default_head_block.xml .
    – Dolar
    Sep 6, 2018 at 9:50
0

You can try OwlCarousel instead of bxslider :

https://hweb87.wordpress.com/2018/09/04/how-to-call-owl-carousel-in-magento2/

Your Answer

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

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