Ideal Image Slider with Bullet Navigation fails on jquery

Question

I am getting the f­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ollowing code: ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­VM6628:7

Uncaught SyntaxError: Unexpected token <
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Nb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
    at Ia (jquery.min.js:3)
    p @ jquery.min.js:2
    globalEval @ jquery.min.js:2
    text script @ jquery.min.js:4
    Nb @ jquery.min.js:4
    A @ jquery.min.js:4
    (anonymous) @ jquery.min.js:4
    send @ jquery.min.js:4
    ajax @ jquery.min.js:4
    r._evalUrl @ jquery.min.js:4
    Ia @ jquery.min.js:3
    append @ jquery.min.js:3
    (anonymous) @ jquery.min.js:3
    S @ jquery.min.js:3
    html @ jquery.min.js:3
    (anonymous) @ angular-ui-router.min.js:7
    (anonymous) @ angular.js:1291
    ta @ angular.js:10252
    n @ angular.js:9641
    g @ angular.js:8881
    (anonymous) @ angular.js:8746
    (anonymous) @ angular.js:9137
    l @ angular-ui-router.min.js:7
    (anonymous) @ angular-ui-router.min.js:7
    $broadcast @ angular.js:18298
    (anonymous) @ angular-ui-router.min.js:7
    (anonymous) @ angular.js:16648
    $eval @ angular.js:17972
    $digest @ angular.js:17786
    $apply @ angular.js:18080
    l @ angular.js:12210
    t.onload @ angular.js:12364
VM6630:3 Uncaught TypeError: slider.addBulletNav is not a function
    at <anonymous>:3:9
    at p (jquery.min.js:2)
    at Ia (jquery.min.js:3)
    at r.fn.init.append (jquery.min.js:3)
    at r.fn.init.<anonymous> (jquery.min.js:3)
    at S (jquery.min.js:3)
    at r.fn.init.html (jquery.min.js:3)
    at Object.<anonymous> (angular-ui-router.min.js:7)
    at angular.js:1291
    at ta (angular.js:10252)

I am using ideal image slider with its extension bullet-nav and I followed their instructions, but I feel it is using an old version of jquery or something because it is giving me errors when I have the following code:

<script src="./bower_components/ideal-image-slider/ideal-image-slider.min.js"></script>
<script src="./src/js/iis-bullet-nav.js"></script>
<script>
    var slider = new IdealImageSlider.Slider('#slider');
    slider.addBulletNav();
    slider.start();
</script>

I am currently also importing earlier jquery, angularjs, and bootstrap using bower, so I am not­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ exactly sure if it is a conflict in one of the libraries, most likely jquery because of the error message. Also VM6628:7 ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­is an html file, so I am not sure why it would be trying to parse that using jquery. Please help me figure out what I need to add to make this work?

Answer 1

Never mind, it was a path that seemed to be wrong to my bullet js file. Not sure why it said it was 200 loaded, but when I called it with ./bower_components, it loaded properly.

Answer 2

Try wrapping your script where you instantiate the slider in a document.ready event from jquery since you are using it, so that you are calling the constructor for the slider when the DOM is loaded.

$( document ).ready(function() {
  var slider = new IdealImageSlider.Slider('#slider');
  slider.addBulletNav();
  slider.start();
});