jQuery 滑块不起作用 (bxSlider)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13610844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery slider not working (bxSlider)
提问by Kiwimoisi
I can't seem to make the bxSlider working properly and can't find the reason why.
我似乎无法使 bxSlider 正常工作，也找不到原因。
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:
这是我在 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 () {
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.
如果你想看看它实际上看起来在那里工作，但在我的本地机器上，我无法使这个滑块正常工作。
回答by Kundan Singh Chouhan
Put the jquery min script reference before the bxslider.js
将 jquery min 脚本引用放在 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>
回答by rakesh kumar
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
autoControls: true
});
});
</script>
Try this one as you are not providing any method.
试试这个，因为你没有提供任何方法。
回答by drpull
I just had bxslider stop working in a Wordpress theme i'm using. Wordpress 3.4.2 uses jquery1.7.2, Wordpress 3.5 uses jquery1.8.3. When i drop the jquery1.7.2 file back in there, bxslider works again. Looks like whatever changed between 1.7.2 and 1.8.0 in jquery broke bxslider.
我刚刚让 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。
回答by ben
I found I need to be more specific that than the document originally lets on probably due to changes in the spec I found this code works better:
我发现我需要比文档最初允许的更具体，可能是由于规范的更改，我发现此代码效果更好：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/slider/jquery.bxslider.js"></script>
