jquery - goToSlide を使用してスライダーを開いて関連するスライド bxSlider を表示する

Question

bxSlider プラグインを使用して、正しいスライド (ダンサー) のプロファイルを開くことができるようにする必要があります。ページの読み込み時に、スライダーは非表示になります。サムネイルにデータ属性を設定し、スライダーのアイテムにクラスを設定して、それらをリンクできるようにしました。スライダー API を使用して goToSlide 関数のパラメーターを置き換える方法がわかりません。私が現在持っているコード：

HTML

<div class="grid the-dancers">
    <div class="col col-2">
        <div class="member dancer" data-dancer="d-1">
            <h3>Name 1</h3>
            <a href="#"><img src="<?php echo $this->getThemePath(); ?>/images/team-member.jpg" alt="Elessha Drennan"></a>
            <a href="" class="info"><span aria-hidden="true" data-icon="&#xe082;"><span class="visually-hidden">Info</span></span></a>
        </div>
    </div>
    <div class="col col-2">
        <div class="member dancer" data-dancer="d-2">
            <h3>Name 2</h3>
            <a href="#"><img src="<?php echo $this->getThemePath(); ?>/images/team-member.jpg" alt="Elessha Drennan"></a>
            <a href="" class="info"><span aria-hidden="true" data-icon="&#xe082;"><span class="visually-hidden">Info</span></span></a>
        </div>
    </div>
    <div class="col col-2">
        <div class="member dancer" data-dancer="d-3">
            <h3>Name 3</h3>
            <a href="#"><img src="<?php echo $this->getThemePath(); ?>/images/team-member.jpg" alt="Elessha Drennan"></a>
            <a href="" class="info"><span aria-hidden="true" data-icon="&#xe082;"><span class="visually-hidden">Info</span></span></a>
        </div>
    </div>
</div>

<div class="dancer-profile-container">
    <div class="wrap content">
        <ul class="dance-slider">
          <li class="d-1">
            <div class="grid">
                <div class="col col-3">
                    <h2>Name 1</h2>
                </div>
                <div class="col col-9">
                    <div class="grid">
                        <div class="col col-3">
                            <img src="<?php echo $this->getThemePath(); ?>/images/virtual-descent-intro.jpg">
                        </div>
                        <div class="col col-9">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                </div>
            </div>
          </li>
          <li class="d-2">
            <div class="grid">
                <div class="col col-3">
                    <h2>Name 2</h2>
                </div>
                <div class="col col-9">
                    <div class="grid">
                        <div class="col col-3">
                            <img src="<?php echo $this->getThemePath(); ?>/images/virtual-descent-intro.jpg">
                        </div>
                        <div class="col col-9">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                </div>
            </div>
          </li>
          <li class="d-3">
            <div class="grid">
                <div class="col col-3">
                    <h2>Name 3</h2>
                </div>
                <div class="col col-9">
                    <div class="grid">
                        <div class="col col-3">
                            <img src="<?php echo $this->getThemePath(); ?>/images/virtual-descent-intro.jpg">
                        </div>
                        <div class="col col-9">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                </div>
            </div>
          </li>
        </ul>
    </div>
    <span class="ds-close">Close</span>
</div>

jQuery

var danceSlider;

$(document).ready(function(){

danceSlider = $('.dance-slider').bxSlider({
    pager: false,
    onSliderLoad: function(){
        danceSlider.goToSlide(1);
        }
});

$('.member a').on('click', function(e){
    e.preventDefault();
    $('.dancer-profile-container').fadeIn('fast');
    danceSlider.reloadSlider();
});
});

現時点でこれが行うことは、スライダーを 2 番目のスライドまで開くことだけです。