swiper轮播初次加载是空白,点击左右滑动按钮时就出现了

新手上路,请多包涵

问题描述

swiper轮播初次加载时出现空白页面,点击第二页时就出来了空白页就消失了

问题出现的环境背景及自己尝试过哪些方法

时需要用轮播来展现一些内容,出现的问题

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-9369px, 0px, 0px);">
            <div class="swiper-slide">
                <div class="measurements">住院实时审核检测指标</div>
                <div style=" margin-right: 60px;">
                    <div style="display: flex;margin-left: 5%;">
                        <div class="boss-measurements">
                            <div class="measurements-number">0 / 13</div>
                            <div class="add-number">
                                <a href="">累计审核有问题处方数/累计审核总数</a>
                            </div>
                        </div>
                        <div class="boss-measurements">
                            <div class="measurements-number1">0 / 33</div>
                            <div class="add-number1">
                                <a href="">累计提交有问题处方数/累计提交总数</a>
                            </div>
                        </div>
                        <div class="boss-measurements">
                            <div class="measurements-number2">0 / 15</div>
                            <div class="add-number2">
                                <a href="">累计拦截处方数</a>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;margin-left: 5%;margin-top: 1%;">
                        <div class="boss-measurements">
                            <div class="measurements-number3">0 / 0</div>
                            <div class="add-number3">
                                <a href="">今日审核有问题处方数/今日审核总数</a>
                            </div>
                        </div>
                        <div class="boss-measurements">
                            <div class="measurements-number4">0 / 0</div>
                            <div class="add-number4">
                                <a href="">今日提交有问题处方数/今日提交总数</a>
                            </div>
                        </div>
                    </div>
                    <!--<div style="display: flex;margin-left: 3%;margin-top: 1%;justify-content: flex-end;margin-right: 3%;margin-top: -169px;">
                        <div class="boss-measurements">
                            <div class="measurements-number5">0</div>
                            <div class="add-number5">
                                <a href="">在线医生数</a>
                            </div>
                        </div>
                    </div>-->
                </div>
            </div>
            <div class="swiper-slide">
                <div class="measurements">门诊实时审核检测指标</div>
                <div style="margin-right: 60px;">
                    <div style="display: flex;margin-left: 5%;">
                        <div class="boss-measurements">
                            <div class="measurements-number">4 / 25</div>
                            <div class="add-number">
                                <a href="">累计审核有问题处方数/累计审核总数</a>
                            </div>
                        </div>
                        <div class="boss-measurements">
                            <div class="measurements-number1">0 / 14</div>
                            <div class="add-number1">
                                <a href="">累计提交有问题处方数/累计提交总数</a>
                            </div>
                        </div>
                        <div class="boss-measurements">
                            <div class="measurements-number2">3 / 20</div>
                            <div class="add-number2">
                                <a href="">累计拦截处方数</a>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;margin-left: 5%;margin-top: 1%;">
                        <div class="boss-measurements">
                            <div class="measurements-number3">0 / 1</div>
                            <div class="add-number3">
                                <a href="">今日审核有问题处方数/今日审核总数</a>
                            </div>
                        </div>
                        <div class="boss-measurements">
                            <div class="measurements-number4">1 / 1</div>
                            <div class="add-number4">
                                <a href="">今日提交有问题处方数/今日提交总数</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>


    </div>

<script language="javascript">

var mySwiper = new Swiper('.swiper-container', {

// loop:true,

    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
});

</script>

你期待的结果是什么?实际看到的错误信息又是什么?

阅读 2.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题