当输入获得焦点时，光滑的滑块方法 'slickPrev' 不会在 bootstrap 模态内触发

Question

我在 bootstrap 模态中使用 slick slider 及其方法 'slickPrev' 和 'slickNext' 来滑动一些内容 manually.One slide 有一个表单并且在表单之前一切正常输入获得焦点，然后我无法使用触发 'slickPrev' 方法的按钮返回到上一张幻灯片。该问题仅在移动浏览器上出现，到目前为止 chrome for android.

我试图在模态之外重现问题，但问题似乎只发生在模态内部，正如您在这个 jsfiddle 中看到的那样：https://jsfiddle.net/3x4bum5h/1/ where

$('body').on('click','.back-to-content',function(){
        $('.wl-items-swipe').slick('slickPrev');
        $('body').find('.modal-footer .btn-group').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button><button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>');

});

只会使输入失去焦点，否则它会在没有焦点输入时正常工作。

Answer 1

好的，我发现 solution.To 可以正常工作我不得不从页脚中删除触发幻灯片的按钮并将它们放在幻灯片中。这是工作 fiddle：https://jsfiddle.net/yjex03gf/

<div class="wl-content">
     <p id="some-content">Lorem ipsum dolor sit amet.</p>
         <div class="btn-group">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>&nbsp;
              <button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>
        </div>
</div>

<div class="wl-form">
     <form id="w-items-form">
        <div class="form-group">
        <label for="email" style="font-weight:bold;font-size:14px">Email</label>
        <input type="text" class="form-control wl-email" placeholder="Email"/>
        </div>
        <div class="form-group">
        <label for="phone"  style="font-weight:bold;font-size:14px">Phone<span style="color:red">*</span></label>
        <input type="tel" class="form-control wl-phone" max="15" placeholder="Phone number"/>
        </div>
        <div class="form-group text-center">
            <button type="button" class="btn btn-wl-submit" style="font-size:14px;">Send <i class="fa fa-send"></i></button>
        </div>
    </form>
    <div class="btn-group">
         <button type="button" class="btn btn-default back-to-content" style="border-right: 2px solid #ececec;"><i class="fa fa-arrow-left"></i> Back</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
    </div>
</div>

Answer 2

<style>
    .modal{
      display:block!important;
      z-index:-1;
    }
    .modal-open .modal{
      z-index:1080;
    }
</style>

当输入获得焦点时，光滑的滑块方法 'slickPrev' 不会在 bootstrap 模态内触发

Slick slider method 'slickPrev' not firing inside bootstrap modal when input gains focus

javascript

css

jquery

bootstrap-modal

slick.js