bxslider自定义分页器图像

Question

我有这个问题：

我正在尝试创建一个自定义分页器，我需要使用2个不同的图像来区分黄色的活​​动图像和洋红色的非活动图像。我正在重叠正常图像（洋红色）的那一刻当点击它或让类Active时，我只是给它们一个不透明度：0;使用Css3。

我试图加入data-slide-index并创建一个If条件时，如果你在data-slide-Index =（1）中，你必须将Id更改为＃item1_img_ac。 但是没有用。

你可以看到这里的例子:(我只是为了Ipad，所以你需要将切换设备工具栏更改为Ipad然后你就可以看到它了）

http://brendameneses.hostingmyself.com/project2

我的代码是

#item1_img{
    background-image: url("../images/m1_a.png");
     width: 116px;
     height: 50px;
     float: left;
     background-repeat: no-repeat;
     opacity: 0.6;
 }


#item1_img_ac{
    background-image: url("../images/m1_a.png");
    width: 116px;
    height: 50px;
    float: left;
    background-repeat: no-repeat;
    opacity: 0.6;
}






$('.bxslider').bxSlider({       /**pagerCustom: '#nav',**/  
    infiniteLoop:false,     controls:false,
     responsive:true,
      buildPager: function(slideIndex){
     switch(slideIndex){
       case 0:
         return '';
       case 1:
          return '<div id="item1" class="items"> <div id="item1_img"></div></div>';
       case 2:
         return '<div id="item2" class="items"> <div id="item2_img"></div></div>';
       case 3:
         return '<div id="item3" class="items"> <div id="item3_img"></div></div>';
       case 4:
         return '<div id="item4" class="items">  <div id="item4_img"></div></div>';
       case 5:
         return '<div id="item5" class="items"> <div id="item5_img"></div></div>';
       case 6:
         return '<div id="item6" class="items"> <div id="item6_img"></div></div>';
     }   },   
});