2

我似乎无法使 bxSlider 正常工作，也找不到原因。

这是我的代码

<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>

这是我在 Firefox 控制台中遇到的错误：

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 () {

如果你想看看它实际上看起来在那里工作，但在我的本地机器上，我无法让这个滑块正常工作。

4

4 回答 4

7

将 jquery min 脚本引用放在 bxslider.js 之前

替换这个

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

和

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>    
<script src="/js/slider/jquery.bxslider.js"></script>
于 2012-11-28T17:23:26.563 回答
1 
<script type="text/javascript">
            $(document).ready(function(){
                $('.bxslider').bxSlider({
                        autoControls: true
                    });
            });
</script>

试试这个，因为你没有提供任何方法。

于 2012-12-13T07:45:49.267 回答
1

我刚刚让 bxslider 停止在我正在使用的 Wordpress 主题中工作。Wordpress 3.4.2 使用 jquery1.7.2，Wordpress 3.5 使用 jquery1.8.3。当我将 jquery1.7.2 文件放回那里时，bxslider 再次工作。看起来 jquery 中 1.7.2 和 1.8.0 之间的任何变化都破坏了 bxslider。

于 2012-12-15T05:23:15.937 回答
-1

我发现我需要比文档最初允许的更具体，这可能是由于规范的变化我发现这段代码效果更好：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/slider/jquery.bxslider.js"></script>
于 2014-04-27T07:51:41.297 回答