Home/ Questions/Q 8922421
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T06:49:45+00:00

I can’t seem to make the bxSlider working properly and can’t find the reason

  • 0

I can’t seem to make the bxSlider working properly and can’t find the reason why.

This is my code 

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Maxime G - Home</title>
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="portfolio ,html, css, c#, wordpress, UK, developer, front-end, back-end, programming, freelancer, freelance, maxime, godrie, maxime godrie, website" />
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.bxslider.css" />

<script src="/js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>

<script src="/js/slider/jquery.bxslider.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>    
    <script type="text/javascript">
    $(document).ready(function () {
        $('.bxslider').bxSlider();
    });
</script>


<section class="sectionCarouselIndex">
     <ul class="bxslider">                                
         <li><img src="img/c2c.jpg" /></li>
         <li><img src="img/dcs-full.jpg" /></li>
         <li><img src="img/eding.jpg" /></li>
         <li><img src="img/karim-full.jpg" /></li>        
         <li><img src="img/waterside-full.jpg" /></li>
         <li><img src="img/chesil-full.jpg" /></li>
         <li><img src="img/enw-full.jpg"/></li>
         <li><img src="img/drl-full.jpg" /></li>   
         <li><img src="img/portal-full.jpg" /></li>
         <li><img src="img/comixology-full.png" /></li>
         <li><img src="img/history-full.jpg" /></li>
         <li><img src="img/parkmap-full.png" /></li>
     </ul>
</section>

This is the error I am getting in the Firefox console:

ReferenceError: jQuery is not defined

[Break On This Error]   

$(document).ready(function () {

index.html (line 25)

ReferenceError: $ is not defined
[Break On This Error]   

$(document).ready(function () {

If you want to have a look It actually looks like it’s working there, but on my local machine there is no way I can make this slider work properly.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Put the jquery min script reference before the bxslider.js

    Replace this

    <script src="/js/slider/jquery.bxslider.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    With 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>    
<script src="/js/slider/jquery.bxslider.js"></script>
    • 0