Question

我无法弄清楚在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>

Answer 1

首先，您实际上并未包含bxslider脚本。您应该按照bxslider site的建议下载源并在本地提供。除此之外，你还包括两个版本的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，但如果可能，您可能需要考虑升级到最新版本。

附加提示，使用开发人员工具构建的浏览器将为您节省大量时间。你应该对它们感到很舒服。

这是example plunkr可能有助于您前进。

BX Slider无法在Bigcartel网站上运行

1 个答案: