1

ユーザーがクリックした矢印に基づいて、特定の遷移効果を発生させることを検討しています。

だから私はこの投稿を見ました、そして私はそれを自分のやり方で適応させようとしていますが、成功しませんでした。

だから私はそれらの画像を持っています：

<div id="slider" class="nivoSlider">
    <?php   foreach($SlideShowImages as $SlideShowImage){
    ?>
        <img src="<?php echo base_url($SlideShowImage['image_url']);?>" data-thumb="" alt="Image SlideShow"/>
    <?php
    }
    ?>
    </div>

そして、ユーザーがその矢印をクリックした場合、私はそれを望みます：

<a class="nivo-prevNav">Prev</a>

彼には特定の効果があるので、私はこれを試しました：

$('.nivo-prevNav').on('click', function(){
       $('#slider img').attr("data-transition","slideInLeft");
  });

成功せずに..。

編集：roineのおかげで、この関数を機能させることができましたが、最後にもう1つ質問があります。まず、矢印をクリックすると、2回目にクリックしたときにのみ遷移効果が変化するように見えます。私の理解では、最初に矢印をクリックしたときに画像に変更を適用し、2回目はそれらの変更がnivoスライダーのプロセスによって考慮されます。

だから私はnivoスライダーのカスタマイズでそれらの線を見ました：

beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition

たぶん私はここで関数を呼び出す必要がありますか？

ありがとう

4

1 に答える 1

2

私はここで解決策を見つけました：

// Assigning a Specific Effect to the Prev/Next Buttons
    $('.nivo-prevNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDown");
    });

    $('.nivo-nextNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDownLeft");
    });
于 2012-08-04T19:07:44.517 に答える