0

一部の制御サムネイルを除いて、FlexSliderを効果的に非表示にしようとしています。サムネイルをクリックすると、FlexSlider がフェードインし、対応する適切なスライドにスライドします。

私が抱えている主な問題は、FlexSlider が非表示の場合、コントロールも非表示になることです。コントロール (FlexSlider デモでは一連のドットで表される) を永続的に表示できるように、2 つを分離する方法はありますか? 次に、スライダーを正しいスライドに移動させる onClick/fadeIn ハンドラーをアタッチできます。

私は現在、GitHub にある 'External Scaffold' メソッドを使用して、カスタムの手動コントロール コンテナーを使用しています。 . StephenWil によるこの「External Scaffold」は、https ://github.com/stephenwil/FlexSlider/blob/master/jquery.flexslider.js で見つけることができます。

ただし、この ManualControls メソッドも機能します。jquery Flexslider 手動コントロールが機能していません

他の誰かが同様の結果を達成しようとしていますか? 説明しているようなポップアップ スライダーは見つかりませんでしたが、多くの人 (およびそのクライアント) にとって望ましい機能だと思います。

この JS Fiddle に実行例を置いてチェックアウトしました: http://jsfiddle.net/uxCzq/

画面の左下に「ドット」/ナビゲーションが突き出ているのがわかりますが、Slider を非表示にすると、含まれている Slider div の外にあるにもかかわらず、ナビゲーションも消えます。

誰でも私を助けることができますか?? お世話になります！

4

1 に答える 1

3

私はクライアント サイトで、あなたが達成しようとしている効果と非常によく似た何かを行ってきました。私はあなたが外部制御方法で持っているのと同じルートで始めましたが、それは私に十分な柔軟性を与えませんでした.

私の解決策は、次のことを行うことでした（申し訳ありません-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 で可視性を 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>

これにより、ユーザーがリンクのいずれかをクリックし、スライダーを正しい位置に移動したときにスライドが表示されます。これは単なる出発点であり、これは私が使用しているコードの非常に簡素化されたバージョンであるため、基本的にそのままではテストされていません。ただし、作業するための適切なプラットフォームを提供する必要があります。問題が発生した場合は叫ぶ

于 2012-03-28T09:39:36.687 に答える