Question

我需要能够使用bxSlider插件打开配置文件到正确的幻灯片（舞者）。在页面加载时，滑块被隐藏。我在滑块li项目的缩略图和类上设置了数据属性，以便它们可以链接在一起。我只是不知道如何使用滑块api来替换goToSlide函数中的参数。 Code i目前有：

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

此刻所有这一切都将滑块打开到第二张幻灯片。

Answer 1

我只是张贴了一个非常基本的答案。修改它以满足您的要求。

设置数据舞者以反映幻灯片编号

例如：

<div class="member dancer" data-dancer="0">

 $('.member img').on('click', function(e){
   e.preventDefault();
   //find the index of the item i.e 0th, or 1st or 2nd item in the list
   var index = $(this).parents('.member').attr('data-dancer');
   danceSlider.goToSlide(index);
 });

我在这里制作了一个jsfiddle SolutionFiddle

使用goToSlide打开相关幻灯片bxSlider的滑块

1 个答案: