owl carousel in bootstrap modal 第一次显示所有图片然后 owl-carousel 正常工作

Question

owl轮播在bootstrap模态中，当我们第一次打开模态时，一次显示所有图像，然后owl-轮播正常工作。

然后正常工作后

我的代码是，

型号代码,

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

owl 轮播方法对点击有效。

$(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
                        }
                    },

                });
            }
        });

    });

Answer 1

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

添加加载器并隐藏滑块div直到加载所有资源，您可以像下面这样尝试

在滑块上方添加 div：

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

并在 window 加载时（即当所有资源成功加载时）：

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

确保隐藏滑块 div

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

owl carousel in bootstrap modal 第一次显示所有图片然后 owl-carousel 正常工作

owl carousel in bootstrap modal first time display all images and then owl-carousel work properly

owl-carousel