Question

以下是获取插件的网站：http://bxslider.com/examples/image-slideshow-captions

我尽我所知遵循所有方向。

首先，包含的所有脚本在视图页面源上都可以正常渲染。所以jquery调用有些问题。但是，在控制台中的firefox firebug上绝对没有错误。

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

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

Answer 1

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

首先，如果您在本地工作，则需要在google apis

链接中添加http

所以从这个

<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文件：）

更新

在第260行上有//导航点击操作的模板文件中调用bxSlider。在他们之前只需复制下面的代码：）

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

Answer 2

我设法在jsfiddle运行这个插件。 http://jsfiddle.net/csdtesting/vs9j9dzu/ 看看正在加载的脚本和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>

无法获取bxSlider插件进行渲染

2 个答案: