-1

我无法弄清楚在 Big Cartel 主题页面上使用 BXSlider 时我做错了什么。我已将 css 添加到我的样式表中，这是我的代码...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>

<script src="https://code.google.com/p/bxslider/"></script>

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

</head>

还有身体里有什么...

<div class="bx-wrapper" style="max-width: 100%;">
   <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 220px;">

    <ul class="bxslider" style="width: auto; position: relative;">
    <li><img src='http://i1338.photobucket.com/albums/o690/robertalsogarrett/IMG_9821_zps67c74096.jpg'></li>
    <li> <img src='http://i1338.photobucket.com/albums/o690/robertalsogarrett/IMG_9907_zps2d37fd53.jpg'></li>
    <li><img src='http://i1338.photobucket.com/albums/o690/robertalsogarrett/IMG_9868_zpsa180b062.jpg' ></li>
  </ul></div>

  <div class="bx-controls bx-has-pager bx-has-controls-direction">
      <div class="bx-pager bx-default-pager">
         <div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link active">1</a></div>
         <div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a></div>
         <div class="bx-pager-item"><a href="" data-slide-index="2" class="bx-pager-link">3</a></div></div>
         <div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div>
     </div>
 </div>
4

1 回答 1

0

首先，您实际上并没有包含 bxslider 脚本。您应该按照bxslider 站点上的建议下载源代码并在本地提供。除此之外，您还包括两个版本的 jQuery，不好。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>

<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

我不知道您使用的是哪个版本的 bxslider，但如果可能的话，您可能需要考虑升级到最新版本。

附加提示，开发人员工具中内置的浏览器将为您节省大量时间。你应该对他们感到很自在。

这是一个示例 plunkr可能会帮助您前进。

于 2014-04-14T20:33:04.997 回答