1

我需要能够使用 bxSlider 插件打开正确幻灯片（舞者）的配置文件。在页面加载时，滑块被隐藏。我已经在滑块 li 项目上的缩略图和类上设置了数据属性，以便它们可以链接在一起。我只是不知道如何使用滑块 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();
});
});

目前所做的就是将滑块打开到第二张幻灯片。

4

1 回答 1

0

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

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

例如：

<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

于 2013-10-04T07:23:24.003 回答