Search code examples
javascriptjquerybxslider

Why Bxslider is not working

I am writing this code in my html file . but slideshow isn't working. All images are lined up vertically. It says bxslider() is not a function. Can anybody help? 

<html>
  <head>
    <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="jquery.bxslider.min.js" type="text/javascript"></script>
    <link href="jquery.bxslider.css" rel="stylesheet" />
  </head>
  <body>
    <ul class="bxslider">
      <li><img src="pictures/newban.jpg" /></li>
      <li><img src="pictures/ban8_2.jpg" /></li>
      <li><img src="pictures/ban7.jpg" /></li>
      <li><img src="pictures/ban1.jpg" /></li>
    </ul>
    <script type="text/javascript">
      $(document).ready(function(){
        $('.bxslider').bxslider({
          autoControls: true
        });
      });
    </script>
  </body>
Solution

  • JavaScript is CaSe SeNsItIvE. I just saw that there's a typo I guess. Your bxslider is not right, it should be bxSlider:

    $('.bxslider').bxSlider({
//---------------^ --------- Change it to bxSlider, it is an uppercase S.

    Please correct that! In the doc it has given:

    $(document).ready(function(){
  $('.bxslider').bxSlider();
});