Question

我们正在实施猫头鹰轮播在所有分辨率的桌面视图上都可以，但在平板电脑视图（ipad）上包含该猫头鹰轮播的闪烁完整页面。

HTML代码：

<div class="col-md-12">
                <div class="row">
                    <div class="text-center" id='answersheet_status'></div>
                    <div class="col-sm-12 col-md-12">
                        <div class="text-center" id='assessment_feedback'>
                            <!--<a href="#" class="pull-right close-btn-assessment" id="close_btn_assessment"><i class="fa fa-times">y</i></a>-->
                        </div>                    
                    </div>
                </div>
                <div class="row" id="main_div_section">
                    <div class="col-md-12 question-section">
                        <div id="section_div" class="col-md-12 owl-carousel owl-theme" style="padding:0 20px;"></div>
                    </div>
                </div>
                <div class="alernate_div_section hide" id="alernate_div_section"></div>
                <div class="col-md-12 no-padding mt15">
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <div class="section-result"></div>
                            <div class="col-md-12  no-padding mt15" id="questions_div">                           
                            </div>
                            <div class="clearfix"></div>
                            <div class="question-footer"></div>
                        </div>
                    </div>
                </div>
            </div>

Js代码：

var carousel = $('.owl-carousel');
    carousel.owlCarousel({
                    rtl: false,
                    margin: 10,
                    nav: true,
                    loop: false,
                    mergeFit: true,
                    startPosition: start_pos,
                    responsive: {
                        0: {
                            items: 1
                        },
                        600: {
                            items: 3
                        },
                        1000: {
                            items: 3
                        },
                        1200: {
                            items: 4
                        },
                        1400: {
                            items: 5
                        }
                    }
                });

注意：如果我们删除那个猫头鹰轮播，那么页面工作正常。 我们不希望在ipad（tabletview）上出现闪烁，为什么会这样？任何解决方案请建议。

（使用owl carousel版本：版本2.0.0）

Answer 1

.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;  // added this
}

请在你的css文件中添加上面的代码，看看这个类是用html代码定义的......

这对我很好....

猫头鹰旋转木马：在平板电脑视图上闪烁

1 个答案: