bqworks / slider-pro

A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.
MIT License
877 stars 390 forks source link

sliderPro is not a function #328

Open walkoffhomerun opened 2 years ago

walkoffhomerun commented 2 years ago

I am getting this "sliderPro is not a function" error in browser network consoles. i am sure this has been brought up before. however, slider pro still works from what i can tell.

jquery-3.5.1.min.js:2 jQuery.Deferred exception: $(...).sliderPro is not a function TypeError: $(...).sliderPro is not a function
.
.
.
S.Deferred.exceptionHook | @ | jquery-3.5.1.min.js:2

it might be specific to my setup but just curious if there is a simple fix for this. I have sliderpro parameters in another js file and again it is working but would like to work out this error message. here is the code from the other js include file

POTENZA.MultipleSliderPro = function () {
  if ($('.slider-pro').exists()) {
    loadScript(plugin_path + 'slider-pro/jquery.sliderPro.min.js', function() {
        $( '.slider-pro' ).sliderPro({
            width: 700,
            height: 450,
            aspectRatio: 1.5,
            visibleSize: '100%',
            autoplay: false,
            arrows: true,
            fadeArrows: false,
            buttons: false, /* bottom image buttons for navigation */
            slideDistance: 5,
            fullScreen: true, 
            autoSlideSize: true //required for narrower images and not have white gaps on sides of narrower images
        });
        $( '.sp-next-arrow' ).addClass( 'fa-chevron-right' ).addClass( 'icon' ).addClass( 'icon-white' ).addClass( 'icon-sm' );
        $( '.sp-previous-arrow' ).addClass( 'fa-chevron-left' ).addClass( 'icon' ).addClass( 'icon-white' ).addClass( 'icon-sm' );  
        $( '.slider-pro' ).sliderPro('resize'); 
     });
   }     
};

you can see a live version here: https://www.investorconstruction.com/properties/1050_Old_Stacy_Rd.html

davidghi commented 2 years ago

Hi,

This can happen is the jQuery library is loaded after the slider script. You need to make sure that jQuery is loaded first.

Best, David

walkoffhomerun commented 2 years ago

david, thanks for the reply. so viewing the loading sequence in the browsers network console it does show jQuery loading before any other slider pro js file. now, being a CDN they seem to load simultaneously in the graph view but as far as order of sequence jQuery is loading first.

I then tried moving jQuery up higher in the page without a "defer" and nothing changed. the same errors are still there.

is there something in my other js file, shown above in 1st post, that loads all the sliderpro config items and maybe how i am calling sliderpro?

again, sliderpro is working even with this error message. i am just not a js guy who can understand what is going on with this error

davidghi commented 2 years ago

Another thing that could cause this kind of error is loading more than one instance of the jQuery library. Not sure if that's the case though.

walkoffhomerun commented 2 years ago

what if sliderpro.min.js loads AFTER the page level config js parameters for slider pro? i see sliderpro.min.js is loading after everything else loads.

davidghi commented 2 years ago

In your code I see that you instantiate the slider in a callback function of loadScript. If that callback is executed after the script loads, then it should be ok.