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> 

這應該顯示您的幻燈片，當用戶點擊您的鏈接之一，並將滑塊移動到正確的位置。這只是一個起點，我應該指出這是我正在使用的代碼的一個非常簡化的版本，所以這基本上是未經測試的。應該給你一個體面的工作平臺。如果你遇到問題，大聲呼喊