0

私は bxslider、サムネイルをページャーとして使用しています。機能はうまく動作しますが、サムネイルに背景画像を適用できないようです。誰でも理由を知っていますか？HTMLとCSSは以下です。

<div class="thumbs">
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
</div>   

  .thumbs a {
    display:block;
    width:150px;
    height:100px;

    float:left;
    background-image:url('images/m2g_logo.png');
}
4

1 に答える 1

0

Web サイトの指示に従ってページャーを作成できます。親指に特定の画像が必要な場合は、そのページで指定されたコードを使用します。

$(function(){
      $('#slider1').bxSlider({
        pager: true,
        buildPager: function(slideIndex){
          switch (slideIndex){
            case 0:
              return '<a href=""><img src="" /></a>';
            case 1:
              return '<a href=""><img src="" /></a>';
            case 2:
              return '<a href=""><img src="" /></a>';
            case 3:
              return '<a href=""><img src="" /></a>';
          }
        }
      });
    });

選択した/選択していない画像だけが必要な場合は、次を使用します。

$(function(){
      $('#slider1').bxSlider({
        pager: true,
        buildPager: function(slideIndex){            
              return '<a href=""><div></div></a>';
        }
      });
    });

以下のように、子 div の背景画像スタイルを設定します。

a.pager-active > div{
    background: url("pager_selected.png") no-repeat scroll !important;
    display:inline;
    outline:none;
}

.bx-pager a > div{      
    display:inline;
    padding:2px; /*set this to half the width of your image*/
    background: url("pager_unselected.png") no-repeat scroll;
    position:relative;
    top:10px;
    outline:none;
}

.bx-pager{
    text-align:center;
 }
于 2012-09-25T23:07:35.530 に答える