Карусель совы в начальной загрузке отображает все изображения, а затем сова-карусель работает правильно - PullRequest
Новая
       22

Карусель совы в начальной загрузке отображает все изображения, а затем сова-карусель работает правильно

0 голосов
/ 17 декабря 2018

Карусель совы в модале начальной загрузки, когда мы открываем модал первый раз, одновременно отображаются все изображения, а затем сова-карусель работает правильно.

enter image description here

затем после работы правильно.

enter image description here

Мой код,

Код модели, 

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

                });
            }
        });

    });

1 Ответ

0 голосов
/ 19 декабря 2018

Сова карусели занимает время при инициализации слайдера.Что вы можете сделать, это добавить загрузчик, пока все не загрузится успешно.

Добавить загрузчик и скрыть ползунок div, пока все ресурсы не загрузятся, вы можете попробовать, как показано ниже

Добавить divнад ползунком: 

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

и при загрузке окна (т. е. при успешной загрузке всех ресурсов): 

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

Убедитесь, что вы спрятали ползунок div 

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