<；jQuery>；带控件的bx滑块自定义寻呼机

我有自定义分页，它们是图像文件。通常它们保持灰色，但单击后，单击的一个会将其颜色更改为绿色

当我单击bx滑块上的“下一步”按钮（控件）时，我想实现两件事

幻灯片移到下一页

显示幻灯片的相应寻呼机图标变为绿色，而其他图标保持灰色

将控件与bx幻灯片链接很容易，但我似乎无法将自定义分页与控件链接。自定义寻呼机在单击时工作正常，分页也在单击时工作正常。但我无法将这两者同时连接起来

我尝试了两个jQuery代码来完成这项任务，但都不起作用。请看下面

jQuery#1
此处发生的事件是“单击”。单击“下一步”按钮后，我希望找到正在显示的幻灯片的索引号，将其保存在变量idx中，然后单击具有相应索引号的寻呼机的子项（标记）

$('.bx-next').on('click', function(){
    var idx=$('.benefit-slider li').find("[aria-hidden='false']").index(this);
    $('#slidePager li').eq(idx).children().on('click');
};

jQuery#2
在此代码中，事件是更改寻呼机的属性。单击“下一步”按钮时，我想将幻灯片的索引号保存在变量idx2中。然后，如果所显示幻灯片的索引号与0匹配，则相应的图像将变为彩色（请注意，彩色图标以-c结尾，而灰色图标以-g结尾）

HTML

任何帮助都将不胜感激！谢谢。

---

pagercstom:String-“

{jQuery/CSS选择器}

” 演示：

pagerCustom:“#bx寻呼机”

指定的自定义寻呼机的每个子元素（直系子元素）必须具有以下属性：

data-*

data-slide-index="{Number}"

演示：

您能将代码的jQuery部分发布到加载bxSlider的地方吗？@zer00ne我上传了bxSlider加载和链接自定义寻呼机的jQery部分。谢谢，但我需要在单击后将寻呼机从灰色变为灰色，其余部分保持灰色。只有选定的一个会变成颜色。在这种情况下，例如，它应该从原始颜色变为“灰色”。我该怎么做？

<!-- CUSTOM PAGER -->

<div class="benefit-container-wrap">
    <ul id="slidePager">
        <li class="b-conts1">
            <a href="#">
                <img src="img/benefit-lowcost-c.png" class="b-cost">
            </a>
        </li>
        <li class="b-conts2">
             <a href="#">
                 <img src="img/benefit-location-g.png" class="b-location">
             </a>
        </li>
        <li class="b-conts3">
             <a href="#">
                 <img src="img/benefit-logistic-g.png" class="b-logistic">
             </a>
        </li>
        <li class="b-conts4">
             <a href="#">
                  <img src="img/benefit-cs-g.png" class="b-cs">
             </a>
        </li>                
    </ul>                    
</div>


<!-- BX SLIDER -->

<div class="benefit-container col-sm-7 col-md-6">
    <ul class="benefit-slider">
        <li>
            <h3 class="b-cost">Competitive Price</h3>
        </li>
        <li>
             <h3 class="b-location">Optimal Location</h3>
        </li>
        <li>
             <h3 class="b-logistic">Total Logistic Solution</h3>
        </li>
        <li>
             <h3 class="b-customer">Outstanding Customer Services</h3>
        </li>
    </ul>
</div>

// load bx-slider//
$('.benefit-slider').bxSlider({
    pagerCustom:'#slidePager',
    controls: true
});


//BxSlider custom pager //
$('.b-conts1').on('click',function(e){
    e.preventDefault();

    $('.b-cost').attr('src','/img/benefit-lowcost-c.png');
    $('.b-location').attr('src','/img/benefit-location-g.png');
    $('.b-logistic').attr('src','/img/benefit-logistic-g.png');
    $('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts2').on('click',function(e){
    e.preventDefault();

    $('.b-cost').attr('src','/img/benefit-lowcost-g.png');
    $('.b-location').attr('src','/img/benefit-location-c.png');
    $('.b-logistic').attr('src','/img/benefit-logistic-g.png');
    $('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts3').on('click',function(e){
    e.preventDefault();

    $('.b-cost').attr('src','/img/benefit-lowcost-g.png');
    $('.b-location').attr('src','/img/benefit-location-g.png');
    $('.b-logistic').attr('src','/img/benefit-logistic-c.png');
    $('.b-cs').attr('src','/img/benefit-cs-g.png');
});
$('.b-conts4').on('click',function(e){
    e.preventDefault();

    $('.b-cost').attr('src','/img/benefit-lowcost-g.png');
    $('.b-location').attr('src','/img/benefit-location-g.png');
    $('.b-logistic').attr('src','/img/benefit-logistic-g.png');
    $('.b-cs').attr('src','/img/benefit-cs-c.png');
});

data-slide-index="{Number}"

{bxSliderObject}.goToSlide(2);

var/const {bxSliderObject} = $("{selector}").bxSlider(...