无法获得bxSlider插件呈现

下面是该网站得到插件：http://bxslider.com/examples/image-slideshow-captions 无法获得bxSlider插件呈现

我按照所有方向，以我的知识。

首先，包含的所有脚本在视图页面源上都可以很好地呈现。所以jquery调用必须有错误。但是，在控制台上的firefox萤火虫绝对没有错误。

这里是jQuery库，css和javascript调用。此外，一切都在页面的头部，我正在使用正确的库版本。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="components/jquery.bxslider/jquery.bxslider.min.js"></script> 
<link href="components/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" /> 


<script> 
    $(document).ready(function() { 
    //boxslider for portfolio 
    $('#bxslider').bxSlider({ 
    mode: 'fade', 
    captions: true 

    }); 
    }); 

</script>

标记HTML：

<div class="container"> 
    <h2>Some of Our Projects</h2> 
    <ul id="bxslider"> 
     <li><img src="../../images/shots/ecommerce.png" title="Happy trees" /></li> 
     <li><img src="../../images/shots/templateviewthread.jpg" title="Funky roots" /></li> 
     <li><img src="../../images/shots/templateprofile.jpg" title="The long and winding road" /></li> 
     <li><img src="../../images/shots/trees.jpg" title="Happy trees" /></li> 
     <li><img src="../../images/shots/valleyvuecoatings.jpeg" title="Happy trees" /></li> 
     <li><img src="../../images/shots/thegazebo.jpeg" title="Happy trees" /></li> 
    </ul> 
</div> 
<!--/.container-->

来源

2014-10-12 Bobby

你可以在小提琴上重拍这个问题吗？这是本地吗？我在很多网站上使用了bxSlider，并没有问题:) – 2014-10-12 11:00:17

Bojan Petkovski当然，我可以做一个小提琴。这是本地和Laravel框架。尽管如此，这应该不重要。 – Bobby 2014-10-12 11:03:33

Bojan Petkovski http://jsfiddle.net/ujtdq0wr/ – Bobby 2014-10-12 11:06:32

所以，你的小提琴是行不通的。这是一个工作示例http://jsfiddle.net/ujtdq0wr/2/

首先，如果您是在本地工作，你需要到http添加从谷歌的链接的API

所以从这个

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

这个

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

你可以检查bxslider脚本和css文件是否加载在你的页面上:)

在你面前SO对行260的导航//点击动作模板文件

UPDATE

呼叫bxSlider只是复制下面:)

$('#bxslider').bxSlider({ 
    mode: 'fade', 
    captions: true 
});

来源

2014-10-12 11:14:55

哎呀，我有一个错字，但没有解决它。 – Bobby 2014-10-12 11:20:43

这里是我的模板，以获得更好的看法，也许看到发生了什么。 http://laravel.io/bin/LN8Kx – Bobby 2014-10-12 11:22:13

我注意到你错过了开始的身体标记。其次你如何插入页面/滑块的内容？ – 2014-10-12 11:25:30

代码我设法运行此插件在jsfiddle。 http://jsfiddle.net/csdtesting/vs9j9dzu/ 采取llok脚本加载和jQuery版本，并尝试与您的网站相同。

$(document).ready(function() { 
     //boxslider for portfolio 
     $('.bxslider').bxSlider({ 
     mode: 'fade', 
     captions: true 

     }); 
    }); 

    <ul class="bxslider"> 
     <li> 
     <img src="http://bxslider.com/images/730_200/hill_road.jpg" title="Funky roots" /> 
     </li> 
     <li> 
     <img src="http://bxslider.com/images/730_200/trees.jpg" title="The long and winding road" /> 
     </li> 
     <li> 
     <img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" /> 
     </li> 
    </ul>

来源

2014-10-12 11:15:06

谢谢，但没有变化。我有正确的库版本以及正确的css和js文件。 – Bobby 2014-10-12 11:22:54

无法获得bxSlider插件呈现

回答

相关问题