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

Question

我有效地试图让FlexSlider隐藏，除了一些控制缩略图。点击缩略图后，FlexSlider会淡入并滑动到相应的幻灯片。

我遇到的主要问题是，当隐藏FlexSlider时，控件也隐藏起来。有没有办法将两者分开，以便我可以通过永久可见的控件（由FlexSlider演示中的一系列点表示）来控制它们？然后，我可以附加一个onClick/fadeIn处理程序，它可以将滑块移至正确的幻灯片。

我目前使用GitHub上的'External Scaffold'方法来使用自定义手动控件容器，因为它好像释放了slideTo（），我认为这是我的问题所在，但我是不是100％确定的。这种“外部脚手架”由StephenWil可以在这里找到：https://github.com/stephenwil/FlexSlider/blob/master/jquery.flexslider.js

然而，这种ManualControls方法也适用：jquery Flexslider manual controls is not working

---

有其他人一直在努力实现类似的结果呢？我没有找到弹出式滑块，但我认为它是许多人（和他们的客户！）所需的功能。

我已经把一个正在运行的例子在这个JS提琴退房： http://jsfiddle.net/uxCzq/

你可以看到“点” /导航屏幕的底部左侧伸出来，但是当你隐藏滑块，导航也会消失，尽管生活在包含滑块div之外。

任何人都可以帮我吗？我会感激你！

Answer 1

我一直在做一些客户端网站，听起来非常类似于你试图实现的效果。我开始采用与外部控制方法相同的方法，但这并没有给我足够的灵活性。

我的解决办法是做到以下几点（对不起 - 将已付出你的jsfiddle但想通这将是更快，更清洁

首先设置标记：

<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（更多acc这样做的有效方法是使用绝对定位将滑块隐藏在屏幕外，并根据请求将其重新放入视图中，但为了保持简单，我将坚持显示/隐藏）

接下来设置您的呼叫到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> 

这应该显示您的幻灯片，当用户点击您的链接之一，并将滑块移动到正确的位置。这只是一个起点，我应该指出这是我正在使用的代码的一个非常简化的版本，所以这基本上是未经测试的。应该给你一个体面的工作平台。如果你遇到问题，大声呼喊