javascript - 带有 manualControls 和 controlNav 的 Flexslider

Question

我正在尝试将 manualControls 和 controlNav 与 flexslider 实例合并，但是这两个功能不能一起工作，如果我激活 manualControls 只有 manualControls 会工作，是否有任何修复或者我遗漏了什么，下面是我的代码

 $('.home_slider').flexslider({
                animation: "slide",
                slideshow: false,
                directionNav: false,
                manualControls: ".slide_controll li",
                controlsContainer: ".home_banner",
                controlNav: true
});

如果不可能，有没有其他方法可以创建另一个自定义控件

这是我的 fiddle :jsfiddle for my slider

Answer 1

您可以使用不同的方法来解决这种情况。首先，我尝试使用插件提供的选项。我遇到过，如果您使用 manualControls，则 controlNav 提供的控件会隐藏。那就是你的经历，所以我想到了几个想法。

第一个想法是创建自定义导航控件并为它们分配默认控件具有的事件。考虑到这一点，我得出的结论是有点乏味，因为您必须分配点击事件，而且当点击默认控件时，您还必须更新自定义控件，然后不仅点击而且触摸，keyup(因为您也可以控制它键盘箭头)，这是可行的，但你必须确保你没有错过任何东西。

第二个想法是使用属性 asNavFor 或 sync。真诚的，我是第一次看到这个插件。我尝试使用 asNavFor 但没有奏效 我不知道为什么，但我认为必须以某种方式工作。我继续使用 sync。我想我可以将 slider 保留为默认控件并执行另一个将被隐藏但带有自定义控件的 slider 并使用 sync 属性来同步两个 slider ，因此两个控件都将控制第一个 slider ，因为第二个将被隐藏。我在这个 jsfiddle 中想出了一个工作示例:

http://jsfiddle.net/jpyh4kLn/5/

HTML:

<div class="container">
    <div class="flexslider" id="main-slider">
      <ul class="slides">
        <li>
          <img src="http://placehold.it/350x150"/>
        </li>
        <li>
          <img src="http://placehold.it/350x150"/>
        </li>
        <li>
          <img src="http://placehold.it/350x150"/>
        </li>
        <li>
          <img src="http://placehold.it/350x150"/>
        </li>
      </ul>
    </div>

    <div class="flexslider" id="nav-slider">
        <ul class="slides">
            <li></li><li></li><li></li><li></li>
        </ul>
    </div>
    <ul class="slide_controll">
        <li>Various Aria 1</li>
        <li>Various Aria 2</li>
        <li>Various Aria 3</li>
        <li>Various Aria 4</li>
    </ul>
</div>

注意 #nav-slider 是隐藏的但与 #main-slider 同步所以 #nav-slider' s 控件还控制 #main-slider，但您只能看到第一个 slider 。

JS:

$(function() {
    $('#main-slider').flexslider({
        animation: "slide",
        slideshow: false,
        directionNav: false,
        controlNav: true
    });

    $('#nav-slider').flexslider({
        directionNav: false,
        slideshow: false,
        sync: '#main-slider',
        manualControls: ".slide_controll li",
        controlsContainer: ".container"
    });
})

在 CSS 上，我将此样式添加到 #nav-slider 以隐藏它:

#nav-slider {
    height: 0;
    margin: 0;
    opacity: 0;
    padding; 0
    visibility: hidden;
    width: 0;
}

您可以在那里添加更多样式或取消一些样式，默认情况下填充为 0，但我添加了它以防万一。请注意，我没有使用 display: none; 因为这对于元素 no 从 DOM 中占用空间来说是理想的，但是当我使用 display: none; 时，它是控件(#nav-slider 的控件)不起作用。这就是为什么我使用 0 高度、宽度、不透明度、边距、填充或所有可能占用空间的东西，可能是边框或您的 slider 可以具有的任何样式。

这是一个很好的解决方法，因为您正在使用插件中的 sync 属性，并且我确保没有事件从一个控件丢失到另一个控件，它们作为一个整体一起工作。