3

ここで LJ902 によって提供されるように、フレックス スライダーの外側のリンク/ボタンが rel タグを使用して特定のスライドをターゲットにできるようにするフレックス スライダーのコードを実装しています: jQuery FlexSlider hide Slider but keep visibility of Manual Controls

フレックススライダーがスライドのセクション内に配置されているときに、ターゲットリンク/ボタンのcss状態を変更する方法に興味があります(アクティブな状態であることを示すために別の色の背景を与えます)。

たとえば、下の例では、画像 images/section2-Image01.jpg から images/section2-Image03 の間の状態でスライダーを操作すると、セクション 2 のスライド サム リンクの css 状態が変更され、セクション内のスライドが変更されます。 3 セクション 3 のスライドサム リンクの css 状態が変更され、セクション 2 のスタイリングが以前の状態に戻ります。本質的には、ユーザーが次のセクションにスライド/クリックしたときに流れるタブのような機能を作成します

<a rel="0" class="slide_thumb" href="#">Section 1</a>
<a rel="3" class="slide_thumb" href="#">Section 2</a>
<a rel="6" class="slide_thumb" href="#">Section 3</a>

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="images/section1-Image01.jpg" />
            </li>
            <li>
            <img src="images/section1-Image02.jpg" />
            </li>
            <li>
            <img src="images/section1-Image03.jpg" />
            </li>
            <li>
             <img src="images/section2-Image01.jpg" />
            </li>
            <li>
            <img src="images/section2-Image02.jpg" />
            </li>
            <li>
            <img src="images/section2-Image03.jpg" />
            </li>
            <li>
             <img src="images/section3-Image01.jpg" />
            </li>
            <li>
            <img src="images/section3-Image02.jpg" />
            </li>
            <li>
            <img src="images/section3-Image03.jpg" />
            </li>
        </ul>
  </div>

誰でもこれで私を助けてくれますか? 私の平凡な開発スキルは、この 1 日かそこらでこれに悩まされています。ありがとう!

4

0 に答える 0