0

In my main.js file I have included code for slider

   $(".main-slider").bxSlider({
            //mode:'fade',
            controls:false,
            pager: 'true',
            auto:false,
            onSlideBefore:function($slideElement, oldIndex, newIndex){ 
                var newBg = $slideElement.find("span.banner-bg  img").attr("src");
                $slideElement.css( 'background-image', 'url(' + newBg+ ')');
            },
            onSliderLoad: function(currentIndex){
                $(".main-slider li").each(function(){
                        var newBg = $(this).find("span.banner-bg  img").attr("src");
                        $(this).css( 'background-image', 'url(' + newBg+ ')');
                });

            }
        });

and I get this error. Can someone help to fix it.

enter image description here

2 Answers 2

1

It is necessary to wrap your code in the requirejs and connect modules. Your module will be located in the NameSpace_Module/web/js/your_module.js(bxSlider)

require(['jquery', 'jquery/ui','NameSpace_Module/web/js/your_module'], function($,bxSlider){ 
        $(".main-slider").bxSlider({
            //mode:'fade',
            controls:false,
            pager: 'true',
            auto:false,
            onSlideBefore:function($slideElement, oldIndex, newIndex){ 
                var newBg = $slideElement.find("span.banner-bg  img").attr("src");
                $slideElement.css( 'background-image', 'url(' + newBg+ ')');
            },
            onSliderLoad: function(currentIndex){
                $(".main-slider li").each(function(){
                        var newBg = $(this).find("span.banner-bg  img").attr("src");
                        $(this).css( 'background-image', 'url(' + newBg+ ')');
                });

            }
        });
 });
0

Check where bxSlider function is defined (lets assume in file jquery.bxslider.js), it looks like main.js script is loaded to the page before jquery.bxslider.js

4
  • These are the files which I am having <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> <script src="js/vendor/jquery-1.11.2.min.js"></script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/main.js"></script> and all these js files are included via require-config.js and within main.js i have provided the function for bxslider. Commented May 27, 2018 at 8:28
  • @BridgitThomas have you found where bxSlider function is defined? Commented May 27, 2018 at 8:30
  • yes in main.js on the top of the file Commented May 27, 2018 at 8:34
  • if you could provide me your mail id I shall send my js file so that you can have look at it. Commented May 27, 2018 at 8:35

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.