Предотвратить показ слайдов одновременно с карандашом jquery

Я не уверен, что это может произойти, иногда, когда страница загружается, она отображается правильно, показывается один слайд, а иногда он отображает все слайды в одном окне. Он также инициируется в модуле 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> <p>Hello :)</p> <p>Since this is your first time using DMNO, how about we setup a few things?</p> </div> <div> <button data-dismiss="modal" id="slide01No">"No, that far too rational"</button> <button id="slide01Yes">"Yes, that would be logical"</button> </div> </div> <div width="100%" id="slide02"> <div> <p>Excellent!</p> <p>What is your name, stranger?</p> <form role="form" id="first-last-form-onboard"> <div> </div> <div> </div> </form> </div> <div> <!-- <button class="btn btn-raised btn-onboard-negative">"No, that far too rational"</button> --> <button form="first-last-form-onboard" type="submit" id="save-name-form">"I have a name!"</button> </div> </div> <div width="100%" id="slide03"> <div> <p>Do you want to send invoices?</p> </div> <div> <button id="slide03No">"No. I just came for the free file transfers"</button> <button id="slide03Yes">"Yes. Invoices are good."</button> </div> </div> <div width="100%" id="slide04"> <div> <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> <button id="slide04No">"Maybe later"</button> <button id="stripe-connect-onboard">"Yes. Let do it."</button> </div> </div> <div width="100%" id="slide05"> <div> <p>We can send automated payment reminders to your clients so you don't have to.</p> </div> <div> <button id="slide05No">"No, I prefer the personal touch"</button> <button id="set-up-payment-reminders">"Yes! I'll save so much time!"</button> </div> </div> <div width="100%" id="slide06"> <div> <p>This will be product feature start</p> </div> <div> <button id="slide06No">"No"</button> <button id="slide06Yes">"Yes"</button> </div> </div>
</div>

Когда он отображает, он отображает все слайды сразу, а не по одному за раз

2 ответа

РЕШЕНИЕ ДЛЯ ЛЮБОГО ИСПОЛЬЗОВАНИЯ JQUERY MOBILE

Сценарий 1. Вы используете пятно на странице jQuery Mobile, которая еще не создана.

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

Сценарий 2. Вы используете пятно на div, который скрыт при загрузке страницы. Обновите свой код, чтобы инициализировать пятно ПОСЛЕ того, как вы скрываете содержащий элемент:

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


У меня была идентичная ситуация в проекте JQuery Mobile. Проблема в том, что порядок визуализации фреймворков vs slick - иногда вам повезет, но редко на мобильных устройствах.

В конце концов работала, чтобы дождаться завершения переходов страниц, прежде чем применять пятно. С 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, пока выполняется инициализация пятна.

licensed under cc by-sa 3.0 with attribution.