Question

我使用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');
}

Answer 1

您可以按照their website上的说明构建寻呼机。如果您想要拇指的特定图像，请使用他们在该页面上指定的代码：

$(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;
 }

如何在bxslider寻呼机中以缩略图的形式应用背景图像？

1 个答案: