未捕获的TypeError：$（…）.bxSlider不是函数

Question

<ul class="bxslider">
  <li><img src="remove be me" title="Trappers Turn Bunkers Before" /></li>
  <li><img src="remove be me" title="Trappers Turn Bunkers Rennovation" /></li>
  <li><img src="remove be my" title="Trappers Turn Bunkers Rennovation" /></li> 
  <li><img src="remove by me" title="Trappers Turn Bunkers After" /></li> 
</ul>

$(document).ready(function() {
    $('.bxslider').bxSlider({
        mode: 'fade',
        video: true,
        auto: true,
        adaptiveHeight: false,
        pause: 6000,
        autoControls: true,
        captions: true
    });

    $(".bxslider").show();
});

This gives me this error, why is that?

Uncaught TypeError: $(...).bxSlider is not a function

Answer 1

Make sure the scripts has been added to the page:

remember to replace " yourlocation " with the actual location of the file

<!-- jQuery library -->
<script src="yourlocation/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="yourlocation/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="yourlocation/jquery.bxslider.css" rel="stylesheet" />