Question

引导模式中的猫头鹰轮播，当我们第一次打开模式时，一次显示所有图像，然后猫头鹰轮播正常工作。

然后正常工作。

我的代码是

型号代码

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

                });
            }
        });

    });

Answer 1

猫头鹰传送带在滑块初始化期间会花费一些时间。您可以做的就是添加一个加载器，直到一切成功加载。

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

在滑块上方添加一个div：

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

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

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

确保隐藏滑块div

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

引导模式中的猫头鹰轮播会首先显示所有图像，然后猫头鹰轮播正常工作

1 个答案: