-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 サイトで推奨されているように、ソースをダウンロードしてローカルで提供する必要があります。これに加えて、2 つのバージョンの 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 に答える