jquery - 防止所有幻灯片同时显示光滑轮播jquery

Question

我不确定是什么导致了这种情况发生，有时当页面加载时，它会正确渲染，显示一张幻灯片，有时它会在一个窗口中渲染所有幻灯片。它也是在引导模式内启动的，不确定这是否是问题的一部分。

这是我最初的流畅设置

$('#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>

渲染时，它会立即显示所有幻灯片，而不是一次显示一张

Answer 1

为任何使用 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。更新您的代码以在取消隐藏包含元素后初始化 slick:

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


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