jQuery滑块不工作（bxSlider）

我似乎无法使bxSlider正常工作，找不到原因。jQuery滑块不工作（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() {

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

来源

2012-11-28 Kiwimoisi

当你拿出的Modernizr会发生什么？ – crowjonah

Web控制台中的浏览器错误日志说什么？ – mtk

@Crowjonah它不会改变任何东西。 – Kiwimoisi

把jQuery的脚本最小参考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-28 17:23:26

似乎没有做任何事情..我已经试过这个。 – Kiwimoisi

@Demipouce，但jquery min文件必须位于顶部。你也可以为你的页面提供任何演示吗？ –

我刚刚编辑我的问题，告诉你我得到了什么错误 – Kiwimoisi

<script type="text/javascript"> 
      $(document).ready(function(){ 
       $('.bxslider').bxSlider({ 
         autoControls: true 
        }); 
      }); 
</script>

试试这一个，你不提供任何方法。

来源

2012-12-13 07:45:49

我只是让bxslider停止在我使用的Wordpress主题中工作。 Wordpress 3.4.2使用jquery1.7.2，Wordpress 3.5使用jquery1.8.3。当我将jquery1.7.2文件放回原处时，bxslider再次运行。看起来像在jQuery打破bxslider 1.7.2和1.8.0之间的变化。

来源

2012-12-15 05:23:15 drpull

-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-27 07:51:41 ben

jQuery滑块不工作（bxSlider）

回答

相关问题