引导模式中的猫头鹰轮播第一次显示所有图像，然后猫头鹰轮播正常工作答案

【问题标题】：owl carousel in bootstrap modal first time display all images and then owl-carousel work properly引导模式中的猫头鹰轮播第一次显示所有图像，然后猫头鹰轮播正常工作
【发布时间】：2018-12-17 06:07:25
【问题描述】：

bootstrap modal中的owl carousel，当我们第一次打开modal时，一次显示所有图片，然后owl-carousel就可以正常工作了。

然后正常工作后。

我的代码是，

型号代码，

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="eduAppModal1" role="dialog"
     tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-zoom" role="document">
        <div class="modal-content eduApp-modal">
            <div class="modal-body mb-0 p-0">
                <div class="row" id="eduAppCard1">                       
                    <div class="col-sm-7 col-md-7">
                        <div id="eduAppSlider1" class="owl-carousel owl-theme eduApp-slider">
                            <div class="item img-div">
                                <img id="eduAppSliderimg1" class="eduApp-slide-img img-fluid"
                                     src="frontend/images/slider/eduApp/eduApp_Academics_1.png"
                                     alt="">
                            </div>
                            <div class="item img-div">
                                <img id="eduAppSliderimg2" class="eduApp-slide-img img-fluid"
                                     src="frontend/images/slider/eduApp/eduApp_Academics_2.png"
                                     alt="">
                            </div>
                            <div class="item img-div">
                                <img id="eduAppSliderimg3" class="eduApp-slide-img img-fluid"
                                     src="frontend/images/slider/eduApp/eduApp_Academics_3.png"
                                     alt="">
                            </div>

...

打开模型点击，

<a href="#eduAppModal1" id="eduAppTopic1" data-toggle="modal"
               class="color-gray-darker c6 td-hover-none abc">
                <img src="{{ url('frontend/images/eduAcademics_405x341.png') }}" class="img-responsive zoom"/>
            </a>

猫头鹰轮播方法在点击时起作用。

$(iValue).click(function () {
                $("#eduAppSlider1").owlCarousel({
                    loop: true,
                    slideSpeed: 100,
                    singleItem: true,
                    center: true,
                    items: 1,
                    margin: 0,
                    responsiveClass: true,
                    responsive: {
                        0: {
                            items: 1
                        },
                        600: {
                            items: 1
                        },
                        1000: {
                            items: 1
                        }
                    },

                });
            }
        });

    });

【问题讨论】：

标签： owl-carousel

【解决方案1】：

猫头鹰轮播在滑块初始化期间需要一些时间。你可以做的是添加一个加载器，直到一切都加载成功。

添加一个加载器并隐藏滑块div，直到所有资源加载完毕，你可以尝试如下

在滑块上方添加一个 div：

<div id="loader">Loading...</div>

在窗口加载时（即所有资源成功加载时）：

$(window).on('load', function(){
    $("#loader").fadeOut("slow");
    $("#yourSliderDiv").fadeIn();
});

确保隐藏滑块div

<div id="yourSliderDiv" style="display: none">

【讨论】：

@NIKUNJGADHIYA 很高兴。
你能简单解释一下答案吗？我试过了，它不能正常工作。页面加载时我仍然可以看到对齐调整。
@acmsohail Owl carousel 在滑块初始化期间需要一些时间。你可以做的是添加一个加载器，直到一切都加载成功。因此，正如我在答案中提到的，您首先需要添加一个加载器 div，它将用作封面，直到所有内容加载。因此，当整个内容加载（加载事件）时，您可以显示 owl carousel。