javascript - 在两个单独的 slider 中匹配数据属性

Question

我使用两个单独的 slider ，一个显示图像，另一个显示相应的文本。带有文本的 slider 需要始终显示所有文本，只有与第一个 slider 的当前幻灯片具有相同数据属性的文本才能通过添加“事件”类来更改颜色。由于无论第一个 slider 显示什么图像都必须显示所有文本，因此我无法组合这两个 slider 。

我的问题是如何匹配来自两个单独 slider 的两个数据属性以将事件类添加到第二个 slider 中的一个元素。

到目前为止，这是我的代码:

jQuery(document).ready(function() {
        jQuery('.flexslider').flexslider({
            animation: "fade"
        });


        // if the class .flex-active-slide is being used on an li
        // if data-roles are the same #
        if ('ul.slides li.flex-active-slide' && 'ul.slides li[data-role] == ul.slider-text li[data-role]') {

            // add active class to selected li in second slider
            jQuery("ul.slider-text li").addClass('active');
        }
    });


#########SLIDER 1 #################


<div class="flexslider">
        <ul class="slides">
            <li data-role="1"><img src="/media/island/content/cool-places/1_PARROT_CAY.jpg"/></li>
            <li data-role="2"><img src="/media/island/content/cool-places/2_CUISINART.jpg"/></li>
            <li data-role="3"><img src="/media/island/content/cool-places/3_LITTLE_PALM.jpg"/></li>
            <li data-role="4"><img src="/media/island/content/cool-places/4_RITZ_CAYMAN.jpg"/></li>
            <li data-role="5"><img src="/media/island/content/cool-places/5_REGENT.jpg"/></li>
            <li data-role="6"><img src="/media/island/content/cool-places/6_KIAWAH.jpg"/></li>
            <li data-role="7"><img src="/media/island/content/cool-places/7_FOUR_SEASONS.jpg"/></li>
            <li data-role="8"><img src="/media/island/content/cool-places/8_SEA_ISLAND.jpg"/></li>
            <li data-role="9"><img src="/media/island/content/cool-places/9_CHEECA.jpg"/></li>
            <li data-role="10"><img src="/media/island/content/cool-places/10_RITZ_NAPLES.jpg"/></li>
            <li data-role="11"><img src="/media/island/content/cool-places/11_PINK_SANDS.jpg"/></li>
        </ul>
    </div>


############### SLIDER 2 #####################

<ul class="slider-text">
        <li data-role="1"><p class="uppercase">parrot cay &bull; turks and caicos</p></li>
        <li data-role="2"><p class="uppercase">sea island golf club &bull; sea island</p></li>
        <li data-role="3"><p class="uppercase">ritz carlton &bull; naples</p></li>
        <li data-role="4"><p class="uppercase">cheeca lodge &bull; islamorada</p></li>
        <li data-role="5"><p class="uppercase">ritz carlton &bull; grand cayman</p></li>
        <li data-role="6"><p class="uppercase">four seasons &bull; palm beach</p></li>
        <li data-role="7"><p class="uppercase">little palm island &bull; little torch key</p></li>
        <li data-role="8"><p class="uppercase">kiawah island golf resort &bull; kiawah island</p></li>
        <li data-role="9"><p class="uppercase">regent palms &bull; turks & caicos</p></li>
        <li data-role="10"><p class="uppercase">cuisinart &bull; anguilla</p></li>
        <li data-role="11"><p class="uppercase">pink sands resort &bull; harbor island</p></li>
    </ul>

Answer 1

首先我先问第二个列表是否需要一直显示，为什么它需要是一个 slider ？

无论如何，听起来您想要做的就是添加自定义控件导航。这可以通过添加属性 manualControls 来完成。初始化对象，像这样:

jQuery('.flexslider').flexslider({
    animation: "fade",
    manualControls: '.slider-text li'
});

这会将 slider 链接到控件导航，它们应该共享类和状态。我相信控件导航的设置顺序应该与 flexslider 的对应幻灯片顺序匹配(导航项的索引应该与幻灯片的索引匹配)。

设置完成后，您应该可以为幻灯片和控件导航设置相应的样式。希望这可以帮助!