1

レスポンシブ スライダーでいくつかの新しい機能をテストしていますが、このプラグインの使用中に何かに行き詰まりました: http://responsiveslides.com/

スライダーの開始/停止機能を作成する方法について誰か助けてもらえますか? スライダーがスライド間で自動的に切り替わるか一時停止するかを制御するために、開始/停止オプションが必要であり、ユーザーがもう少し制御できるようにします。

スライダーでまだ使用できる唯一のオプションは、ホバー時に開始/停止することです。DOM でカスタム要素をクリックしたときに開始/停止する必要があります。

4

4 に答える 4

3

プラグインにいくつかのコードを追加する必要があります。

まず、forcePause という名前の変数を作成します。

    fadeTime = parseFloat(settings.speed),
    waitTime = parseFloat(settings.timeout),
    maxw = parseFloat(settings.maxwidth),
    forcePause = false, // <---- here!

restartCycle メソッドでは、一時停止が強制されているかどうかを確認する必要があります。

   restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearInterval(rotate);
        if ( !forcePause ) // new line
          // Restart
          startCycle();
      }
    };

その後、300行目に次のようなものを追加できます。

    $( '.pause_slider' ).click( function( e ){
      e.preventDefault();
      forcePause = true;
      $( this ).hide()
      $( '.play_slider' ).show();
      clearInterval(rotate);
    });

    $( '.play_slider' ).click( function( e ) {
      e.preventDefault();
      forcePause = false;
      $( this ).hide();
      $( '.pause_slider' ).show();
      restartCycle();
    });

彼の作業を行うには、各クラスに 2 つの HTML 要素が必要です。forcePause は、ホバリング後にスライダーを再起動することを回避します。

これが最善の解決策ではないことはわかっていますが、うまくいきます。

ここで動作することがわかります: http://jsbin.com/eHaHEVuN/1/

コードもわかります。:)これがうまくいくことを願っています。

于 2014-01-22T15:27:00.663 に答える
1

別の簡単な解決策があります-ホバーで一時停止を有効にしてから、ホバーをエミュレートします。

JS:

$(".rslides").responsiveSlides({
  pause: true
});

$('.carousel-pause .pause').click(function(e){
  $(this).hide();
  $('.play').show();
  $('.rslides').trigger('mouseenter');
});

$('.carousel-pause .play').click(function(e){
  $(this).hide();
  $('.pause').show();
  $('.rslides').trigger('mouseleave');
});

HTML:

<div class="carousel-pause">
  <span class="pause">Pause</span>
  <span class="play">Play</span>
</div>
于 2015-12-21T14:23:40.770 に答える
1

pauseパラメータ で開始/停止を制御:

$(".rslides").responsiveSlides({
      auto: true,             // Boolean: Animate automatically, true or false
      speed: 500,            // Integer: Speed of the transition, in milliseconds
      timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
      pager: false,           // Boolean: Show pager, true or false
      nav: false,             // Boolean: Show navigation, true or false
      random: false,          // Boolean: Randomize the order of the slides, true or false
      pause: true,           // Boolean: Pause on hover, true or false
      pauseControls: true,    // Boolean: Pause when hovering controls, true or false
      prevText: "Previous",   // String: Text for the "previous" button
      nextText: "Next",       // String: Text for the "next" button
      maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
      navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
      manualControls: "",     // Selector: Declare custom pager navigation
      namespace: "rslides",   // String: Change the default namespace used
      before: function(){},   // Function: Before callback
      after: function(){}     // Function: After callback
    });
于 2013-11-04T10:36:05.353 に答える
0

外部イベントがスライドショーを一時停止できるように調整されたソリューションを取得するために、@miduga からの回答から構築されました。

回転が発生するかどうかを判断するために、回転間隔で使用される window.responsiveSlidesForcePause のグローバル変数を作成することになりました。理想的には、個々のスライドショーを一時停止するパブリック メソッドが存在する必要がありますが、これはページ上の任意のスライドショーを一時停止する簡単なハックです。私の状況では、寿命が短いページに 1 つのスライドショーしか必要ありませんでした。

http://jsfiddle.net/egeis/wt6ycgL0/

グローバル変数を初期化します:

return this.each(function () {

    // Index for namespacing
    i++;

    window.responsiveSlidesForcePause = false; // new global variable

    var $this = $(this),

グローバル変数を使用:

startCycle = function () {
    rotate = setInterval(function () {
        if (!window.responsiveSlidesForcePause) { // new if statement

            // Clear the event queue
            $slide.stop(true, true);

            var idx = index + 1 < length ? index + 1 : 0;

            // Remove active state and set new if pager is set
            if (settings.pager || settings.manualControls) {
                selectTab(idx);
            }

            slideTo(idx);
        }
    }, waitTime);
};

これにより、スライドショーを一時停止するイベントを実際のプラグインの外に置くことができます。

$(document).ready(function() {
    $( "#slider" ).responsiveSlides({ nav: true, prevText: '', nextText: '' });
    $( ".pause_slider" ).on("click", function (e) {
        e.preventDefault();
        $(this).hide();
        $( '.play_slider' ).show();
        window.responsiveSlidesForcePause = true;
    });
    $( '.play_slider' ).click( function(e) {
        e.preventDefault();
        $( this ).hide();
        $( '.pause_slider' ).show();
        window.responsiveSlidesForcePause = false;
    });    
});
于 2014-11-07T16:28:07.307 に答える