3

ページが読み込まれると、適切にレンダリングされ、1 つのスライドが表示され、すべてのスライドが 1 つのウィンドウにレンダリングされることがあります。また、ブートストラップモーダル内で開始されますが、それが問題の一部であるかどうかはわかりません。

これが私の最初の滑らかなセットアップです

$('#carousel').slick({
  dots: true,
  arrows: true,
  nextArrow: '.btn-onboard-positive',
  infinite: false,
  prevArrow: '.not-there'
});

ここに要素自体があります

<div id="carousel">

  <div width="100%" id="slide01">
    <div class="onboard-body">
      <p>Hello :)</p>
      <p>Since this is your first time using DMNO, how about we setup a few things?</p>
    </div>
    <div class="onboard-cta">
      <button class="btn btn-raised btn-onboard-negative" data-dismiss="modal" id="slide01No">"No, that's far too rational"</button>
      <button class="btn btn-raised btn-onboard-positive" id="slide01Yes">"Yes, that would be logical"</button>
    </div>
  </div>

  <div width="100%" id="slide02">
    <div class="onboard-body">
      <p>Excellent!</p>
      <p>What is your name, stranger?</p>
      <form role="form" class="user-onboard-form" id="first-last-form-onboard">
        <div class="dmno-onboard-form">
          <input class="form-control" id="firstNameOnboard" type="text" placeholder="First Name" required>
        </div>
        <div class="dmno-onboard-form">
          <input class="form-control" id="lastNameOnboard" type="text" placeholder="Last Name" required>
        </div>
      </form>
    </div>
    <div class="onboard-cta">
      <!-- <button class="btn btn-raised btn-onboard-negative">"No, that's far too rational"</button> -->
      <button form="first-last-form-onboard" type="submit" class="btn btn-raised btn-onboard-positive" id="save-name-form">"I have a name!"</button>
    </div>
  </div>

  <div width="100%" id="slide03">
    <div class="onboard-body">
      <p>Do you want to send invoices?</p>
    </div>
    <div class="onboard-cta">
      <button class="btn btn-raised btn-onboard-negative" id="slide03No">"No. I just came for the free file transfers"</button>
      <button class="btn btn-raised btn-onboard-positive" id="slide03Yes">"Yes. Invoices are good."</button>
    </div>
  </div>

  <div width="100%" id="slide04">
    <div class="onboard-body">
      <p>We use Stripe to process the payments you recieve. If you don't have a Stripe account, we'll help you register one now.</p>
    </div>
    <div class="onboard-cta">
      <button class="btn btn-raised btn-onboard-negative" id="slide04No">"Maybe later"</button>
      <button class="btn btn-raised btn-onboard-positive" id="stripe-connect-onboard">"Yes. Let's do it."</button>
    </div>
  </div>

  <div width="100%" id="slide05">
    <div class="onboard-body">
      <p>We can send automated payment reminders to your clients so you don't have to.</p>
    </div>
    <div class="onboard-cta">
      <button class="btn btn-raised btn-onboard-negative" id="slide05No">"No, I prefer the personal touch"</button>
      <button class="btn btn-raised btn-onboard-positive" id="set-up-payment-reminders">"Yes! I'll save so much time!"</button>
    </div>
  </div>

  <div width="100%" id="slide06">
    <div class="onboard-body">
      <p>This will be product feature start</p>
    </div>
    <div class="onboard-cta">
      <button class="btn btn-raised btn-onboard-negative" id="slide06No">"No"</button>
      <button class="btn btn-raised btn-onboard-positive" id="slide06Yes">"Yes"</button>
    </div>
  </div>

</div>

レンダリングすると、一度に 1 つずつではなく、すべてのスライドがすぐに表示されます

4

2 に答える 2

2

JQuery Mobile を使用しているすべての人のためのソリューション

シナリオ 1 -まだ作成されていない jQuery Mobile ページで slick を使用している

$(document).on("pagecreate", "#slickPage", function(){
     $('#carousel').slick({
           dots: true,
           arrows: true,
           nextArrow: '.btn-onboard-positive',
           infinite: false,
           prevArrow: '.not-there'
     });
});

シナリオ 2 -ページの読み込み時に非表示になっている div で slick を使用しています。含まれている要素を再表示した後、コードを更新してスリックを初期化します。

$('#hiddenDiv').show();
runSlick();


function runSlick(){
     $('#carousel').slick({
           dots: true,
           arrows: true,
           nextArrow: '.btn-onboard-positive',
           infinite: false,
           prevArrow: '.not-there'
     });
}
于 2016-01-11T11:43:54.060 に答える
0

Jquery Mobile プロジェクトで同じ状況が発生しました。問題は、フレームワーク ウィジェットとスリックのレンダリング順序です。幸運な場合もありますが、モバイルではめったにありません。

最終的にうまくいったのは、ページ遷移が完了するのを待ってからスリックを適用することでした。Bootstrap を使用すると、次のようになります。

$('#carousel').on('shown.bs.modal', function (e) {
    $('#carousel').slick({
       dots: true,
       arrows: true,
       nextArrow: '.btn-onboard-positive',
       infinite: false,
       prevArrow: '.not-there'
    });
})

show.bs.modal運が良ければ、このイベントを利用して FOUC を回避できるかもしれません。#carouselそうでない場合は、 slick の初期化中 に非表示にする必要があるかもしれません。

于 2015-02-17T13:22:11.617 に答える