jQuery FlexSlider hideスライダが手動コントロールの可視性を保持

Question

コントロールサムネイルを除いてFlexSliderを非表示にすることを効果的に試みています。サムネイルをクリックすると、FlexSliderは適切な対応するスライドにフェードインしてスライドします。

私が気付いている主な問題は、FlexSliderを非表示にすると、コントロールも非表示になることです。この2つを分離する方法はありますか？それで、FlexSliderデモの一連の点で表されるコントロールを永久に表示することができますか？次に、スライダを正しいスライドに移動させるonClick/fadeInハンドラをアタッチすることができます。

GitHubにある「External Scaffold」メソッドを使用してカスタムのManual Controlsコンテナを使用していますが、これは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、2番目が1など）

あなたのCSSのflexslider divには何もありません。これを行うためのエッセルブルな方法は、絶対位置を使用してスライダーを画面外に隠し、要求に応じて表示に戻すことですが、物事を簡単に保つためには表示/非表示に固執します）

次の呼び出しを設定します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> 

ユーザーがあなたのリンクをクリックしても正しい位置にスライダーを移動したときにこれがあなたのスライドを表示する必要があります。これは単なる出発点であり、これは私が使用しているコードの非常に古い版ですが、これは基本的にはテストされていないことを指摘しておきます。あなたにはうってつけのプラットフォームが必要です。あなたが問題に遭うと叫ぶ