2

Web サイトのスライダー プラグインとして Flex Slider を使用しています。

私はJQueryに精通していませんが、別の要素（この場合は要素）のコンテンツを結び付けて、同じナビゲーションでフレックススライダーの外側のコンテンツを変更できるようにする方法を誰かが知っているかどうか疑問に思っていました.

コンテンツを

  • とスライドさせているのですが、slider divの外で情報を変更する方法が無いかと考えていました。以下は私のコードです：

    <article class="slider">
    <div class="flexslider-container">
      <div class="flexslider">
        <ul class="slides">
          <li><img class="main" src="/img/banner-boundries.jpg" /></li>
          <li><img class="main" src="/img/banner-makers.jpg" /></li>
          <li><img class="main" src="/img/banner-makers.jpg" /></li>
        </ul><!-- / slides ul -->
      </div><!-- / flexslider div -->
    </div><!-- / flexslider-container div -->
  </article><!-- / slider article -->

 <article class="slider_sub">
    <aside class="column ends">
      <p class="quote">“I was really excited to get my new CIRA X. The ability to manage which devices get priority over our 3G network has revolutionized our business.”&lt;/p>

      <hr>
      <h3>Guy Smiley</h3>
      <p class="footnote">Muppet Anchor Man, FBI Operative</p>
    </aside>
    <aside class="column ends center">
      <h2>What Do Makers Do?</h2>
      <p>Ever wish you had that Thing  that made your current devices do that one task you need?  We make that Thing.  The devices we create are based on solutions for our custmers, not just features.</p>

      <div class="moreinfo"><a href="">read more</a></div>
    </aside>
    <aside class="column ends">
      <h2>The CIRA X Story</h2>
      <img src="img/cira-x-story.png" border="0">
      <p>Read how client need drove the cration of this Feeney Wireless device.</p>
    </aside>  
    <div class="clear"></div>
  </article><!-- / featurette article -->
</section><!-- end call out section -->

    SO スライダー ナビゲーションで、その下のコンテンツもスライドさせたいと思います。ありがとう！

    • 4

    1 に答える 1

    0

    これを実現するには、おそらくいくつかの方法があります。この回答は、flex-slider に固有のものです。実装は、このプラグインに非常に固有のものになります。ここにはかなり優れたドキュメントがいくつかあります。

    理論的には、これを実現するには 2 つの方法があります。

    A. 2 番目のスライダー イベントをバインドして、最初のスライダーのイベントをリッスンします。

    B. スライド イベントをリッスンし、2 番目のスライダーで対応するイベントをプログラムで呼び出します。スライドの内容が 1 対 1 で一致しない場合は、変換が必要になる場合があります。

    A-解決策 -- ドキュメントから判断すると、これは 2 つを結び付けているように見えます。

    <!-- Target both sliders with the same properties -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

//My hesitation on this is that it indicates properties are shared, I am assuming that would included shared event handlers.

    B-解決策 -- 2 つのスライダーがプロパティのみを共有し、イベント ハンドラーを共有しない場合は、手動 (プログラムによる) 方法でフォールバックすることができます。

    <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      controlsContainer: ".flex-container",
      before: function(slider) {
        //Grab second slider and pass along action
        $('#secondSliderID').flexslider.before(slider);
      }
    });
  });
</script>

    スライダーのパラメーターが複雑になる場合があります。どちらも、確認のためにプラグイン固有のトラブルシューティングを少し行う必要があります。

    お役に立てれば。ではごきげんよう！ナッシュ

    于 2012-06-11T20:04:48.053 に答える