2

ResponsiveSlides.js にいくつかのカスタム機能を設定しようとしています。クリックではなくマウスオーバーで動作する手動コントロールでスライダーを使用できるようにする必要がありますが、クリックすると特定の URL リンクに移動します。スライドショーには 4 つのスライドがあり、4 つのボタンを使用してそれらをナビゲートできる必要があります。これが私が達成したいことです：

  1. クリックではなくマウスオーバーで 4 つのボタンが機能するようにします。「manualControls: ".custom-pagers",」を使用してカスタム ナビゲーションを実装しています。マウスオーバーで特定のスライドに移動する方法があるかどうか疑問に思っていましたが、href=""クリックするとURLに移動します。

  2. 別のボタン ( .buy-tag a) を用意し、マウスオーバーでスライダーを一時停止しhref=""ますが、クリックすると URL に移動します。

これが私のコードです：

$(function () {

  // Slideshow 1
  $("#slider1").responsiveSlides({
    speed: 800,
    manualControls: ".custom-pagers", 
  });
});

そしてHTML：

    <!-- SUPER SLIDER -->
    <div class="rslides_container">

    <div id="main-featured" class="twelve columns">  

    <ul class="rslides" id="slider1">
      <li><div id="img-featured" class="five columns"><a href="http://www.domain.com/"><img src="http://www.domain.com/images/image1.png" alt=""></a></div>
         </li>

      <li><div id="img-featured" class="five columns"><a href="http://www.domain.com/"><img src="http://www.domain.com/images/image2.png" alt=""></a></div>
        </li>

      <li><div id="img-featured" class="five columns"><a href="http://www.domain.com/"><img src="http://www.domain.com/images/image3.png" alt=""></a></div>
        </li>

    </ul>


    </div>


    </div><!-- /SUPER SLIDER -->

    <div class="full-row green-mid">
        <div class="row">
            <div id="types-tag" class="four columns">
                <h3>What type are <strong>YOU</strong>?</h3>
            </div>
        </div>

        <div class="row">
            <div class="eight columns">
                <ul class="custom-pagers">
                <li><div class="straight-tag"><a href="http://www.domain.com/link1"><span>1</span> Straight</a></div></li><li><div class="curly-tag"><a href="http://www.domain.com/link2"><span>3</span> Curly-Kinky</a></div></li>
                <li><div class="wavy-tag"><a href="http://www.domain.com/link3"><span>2</span> Wavy-Curly</a></div></li><li><div class="kinky-tag"><a href="http://www.domain.com/link4"><span>4</span> Kinky-Coily</a></div></li>
                </ul>
            </div>
        </div>

        <div class="clear"></div>
    </div>

<div class="buy-tag"><a href="http://www.domain.com/buy"><span><strong>Buy</strong> Now</span></a></div>

誰か助けてくれたり、正しい方向に向けてくれたりできますか? 前もって感謝します！

4

0 に答える 0