任何使用JQUERY MOBILE的解决方案

Question

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

这是我最初的光滑设置

$('#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。在取消隐藏包含元素后，更新代码以初始化光滑：

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


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

Answer 2

我在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。

防止所有幻灯片同时出现光滑的轮播jquery

2 个答案:

任何使用JQUERY MOBILE的解决方案