Prevent all slides from showing up at the same time slick carousel jquery

Question

I am using not sure what is causing this to happen, sometimes when the page loads up, it renders properly, one slide showing and sometimes it renders all the slides in one window. It is also initiated inside a bootstrap modal, not sure if that can be part of the issue.

Here's my initial slick setup

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

and here's the element itself

<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>

When it renders, it shows all slides right away instead of one at a time

Answer 1

SOLUTION FOR ANYONE USING JQUERY MOBILE

Scenario 1 - You are using slick on a jQuery Mobile page that hasn't been created yet

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

Scenario 2 - You are using slick on a div that is hidden on page load. Update your code to initialize slick AFTER you un-hide the containing element:

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


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

Answer 2

I just had an identical situation in a Jquery Mobile project. The problem is the rendering order of framework widgets vs slick - sometimes you get lucky, but rarely on mobile.

What worked in the end was to wait for page transitions to complete before applying slick. With Bootstrap, that would look something like

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

You might get lucky and be able to use the show.bs.modal event to avoid FOUC. If not, you may need to hide #carousel while slick is initializing.