jflow slider does not work perfectly

Question

Please help me in this problem.. why my j-flow slider does not working correctly.. I coy code by j-flow demo.. Please check my given link:

https://dl.dropboxusercontent.com/u/103234001/test/index.html

may be my document ready function have some problem. But I don't know,whats wrong with me..

$(document).ready(function(){

    $("#myController").jFlow({

        controller: ".jFlowControl", // must be class, use . sign

        slideWrapper : "#jFlowSlider", // must be id, use # sign

        slides: "#mySlides",  // the div where all your sliding divs are nested in

        selectedWrapper: "jFlowSelected",  // just pure text, no sign

        effect: "flow", //this is the slide effect (rewind or flow)

        width: "940px",  // this is the width for the content-slider

        height: "300px",  // this is the height for the content-slider

        duration: 400,  // time in milliseconds to transition one slide

        pause: 5000, //time between transitions

        prev: ".jFlowPrev", // must be class, use . sign

        next: ".jFlowNext", // must be class, use . sign

        auto: true  

});

});

Answer 1

You're trying to load jquery from http on an https. jQuery is not getting loaded. Best solution is to use a local version of jquery and refer to it like the rest of your scripts. otherwise you can include jquery like google libraries specifies...

 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>

note the lack of http or https

using your browsers debugging tools makes issues like this easy to spot.