Javascript 猫头鹰转盘:在平板电脑视图上闪烁
我们正在实施猫头鹰旋转木马在所有分辨率的桌面视图上都可以,但在平板电脑视图(ipad)上包含猫头鹰旋转木马的完整页面会闪烁 HTML代码:Javascript 猫头鹰转盘:在平板电脑视图上闪烁,javascript,jquery,html,owl-carousel,Javascript,Jquery,Html,Owl Carousel,我们正在实施猫头鹰旋转木马在所有分辨率的桌面视图上都可以,但在平板电脑视图(ipad)上包含猫头鹰旋转木马的完整页面会闪烁 HTML代码: <div class="col-md-12"> <div class="row"> <div class="text-center" id='answersheet_status'></div> &l
<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>
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转盘版本:2.0.0版)
请在css文件中添加上述代码,并查看该类是用html代码定义的
这对我来说很好……请务必阅读标签说明。这与Web本体语言无关。添加语言标记(例如)和主库标记(例如)通常会有所帮助。我已经相应地编辑了标签。
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
z-index: 1; // added this
}