jQuery FlexSlider隐藏滑块，但保留手动控件的可见性

我正在有效地尝试隐藏FlexSlider，除了一些控制缩略图。单击缩略图时，FlexSlider淡入并滑动到相应的幻灯片

我遇到的主要问题是，当FlexSlider被隐藏时，控件也被隐藏。有没有办法将两者分开，这样我就可以让控件（在FlexSlider演示中由一系列点表示）永久可见？然后我可以附加一个onClick/fadeIn处理程序，使滑块转到正确的幻灯片

我目前正在使用GitHub上的“External Scaffold”方法来使用自定义手动控件容器，因为它似乎释放了slideTo（），我认为这就是我的问题所在，但我不是100%确定。StephenWil的“外部脚手架”可在此处找到：

但是，此手动控制方法也适用于：

---

有没有其他人试图达到类似的结果？我还没有找到我所描述的弹出式滑块，但我认为这是许多人（及其客户！）想要的功能

我在这个JS提琴上放了一个运行的例子来检查：

您可以在屏幕的左下角看到“点”/导航，但是当您隐藏滑块时，导航也会消失，尽管它位于包含滑块的div之外

---

有人能帮我吗？？我要感谢你

我在一个客户端网站上做了一些事情，听起来与您试图达到的效果非常相似。我开始的路线与您使用外部控制方法的路线相同，但这并没有给我足够的灵活性

我的解决方案是执行以下操作（对不起，这会使您的JSFIDLE分叉，但我认为这会更快更干净）

首先设置标记：

<a rel="0" class="slide_thumb" href="#">slide link 1</a>
<a rel="1" class="slide_thumb" href="#">slide link 2</a>
<a rel="2" class="slide_thumb" href="#">slide link 3</a>

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="demo-stuff/inacup_samoa.jpg" />
            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
        </li>
        <li>
            <a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
            <p class="flex-caption">This image is wrapped in a link!</p>
        </li>
        <li>
            <img src="demo-stuff/inacup_donut.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
    </ul>
  </div>

字幕和纸杯蛋糕。获胜组合


此图像包装在一个链接中

请注意链接上的rel属性-我们将在下面使用它们。还请注意，值从0开始-这与幻灯片的值匹配（例如，第一张幻灯片为0，第二张幻灯片为1等）

您应该在css中的flexslider div上将Visibility设置为none（一种更容易实现的方法是使用绝对定位将滑块隐藏在屏幕外，并根据请求将其恢复到视图中，但为了保持简单，我将坚持显示/隐藏）

接下来设置对flexslider插件的调用：

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {

    $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        animationLoop: false,
        directionNav: true,
        slideToStart: 0,
        start: function(slider) {
            $('a.slide_thumb').click(function() {
                $('.flexslider').show();
                var slideTo = $(this).attr("rel")//Grab rel value from link;
                var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
                if (slider.currentSlide != slideToInt) {
                    slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
                }
            });
        }

    });

});
</script>

jQuery（文档）.ready（函数（$）{
$（'.flexslider'）.flexslider({
动画：“幻灯片”，
幻灯片放映：错误，
animationLoop:false，
方向导航：对，
幻灯片开始：0，
开始：功能（滑块）{
$（'a.slide_thumb'）。单击（函数（）{
$（'.flexslider'）.show（）；
var slideTo=$（this）.attr（“rel”）//从链接获取rel值；
var slideToInt=parseInt（slideTo）//确保此值为整数；
如果（slider.currentSlide！=slideToInt）{
slider.flexAnimate（slideToInt）//将滑块移动到正确的幻灯片上（除非滑块已经显示了我们想要的幻灯片）；
}
});
}
});
});

---

当用户点击你的一个链接时，这应该会显示你的幻灯片，并将滑块移动到正确的位置。这只是一个起点，我应该指出这是我正在使用的代码的一个非常精简的版本，因此这基本上是未经测试的。应该会给你一个体面的工作平台。但是，如果你运行，请大声喊叫问题

我在一个客户端网站上做了一些事情，听起来与您试图达到的效果非常相似。我开始采用与外部控制方法相同的方法，但这并没有给我足够的灵活性

我的解决方案是执行以下操作（对不起，这会使您的JSFIDLE分叉，但我认为这会更快更干净）

首先设置标记：

<a rel="0" class="slide_thumb" href="#">slide link 1</a>
<a rel="1" class="slide_thumb" href="#">slide link 2</a>
<a rel="2" class="slide_thumb" href="#">slide link 3</a>

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="demo-stuff/inacup_samoa.jpg" />
            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
        </li>
        <li>
            <a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
            <p class="flex-caption">This image is wrapped in a link!</p>
        </li>
        <li>
            <img src="demo-stuff/inacup_donut.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
    </ul>
  </div>

字幕和纸杯蛋糕。获胜组合


此图像包装在一个链接中

请注意链接上的rel属性-我们将在下面使用它们。还请注意，值从0开始-这与幻灯片的值匹配（例如，第一张幻灯片为0，第二张幻灯片为1等）

您应该在css中的flexslider div上将Visibility设置为none（一种更容易实现的方法是使用绝对定位将滑块隐藏在屏幕外，并根据请求将其恢复到视图中，但为了保持简单，我将坚持显示/隐藏）

接下来设置对flexslider插件的调用：

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {

    $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        animationLoop: false,
        directionNav: true,
        slideToStart: 0,
        start: function(slider) {
            $('a.slide_thumb').click(function() {
                $('.flexslider').show();
                var slideTo = $(this).attr("rel")//Grab rel value from link;
                var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
                if (slider.currentSlide != slideToInt) {
                    slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
                }
            });
        }

    });

});
</script>

jQuery（文档）.ready（函数（$）{
$（'.flexslider'）.flexslider({
动画：“幻灯片”，
幻灯片放映：错误，
animationLoop:false，
方向导航：对，
幻灯片开始：0，
开始：功能（滑块）{
$（'a.slide_thumb'）。单击（函数（）{
$（'.flexslider'）.show（）；
var slideTo=$（this）.attr（“rel”）//从链接获取rel值；
var slideToInt=parseInt（slideTo）//确保此值为整数；
如果（slider.currentSlide！=slideToInt）{
slider.flexAnimate（slideToI