[英]Spinning Loader in Carousels MaterializeCSS
My problem can be shown here: https://codepen.io/AliF50/pen/OzwKdm 我的问题可以在这里显示: https : //codepen.io/AliF50/pen/OzwKdm
<div class="container">
<div class="row">
<div class="col s6">
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>Slide 1</a>
<a class="carousel-item" href="#two!"><div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>Slide 2</a>
</div>
</div>
<div class="col s6">
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>Slide 1</a>
<a class="carousel-item" href="#two!"><div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>Slide 2</a>
</div>
</div>
</div>
</div>
In Google Chrome, it works perfectly. 在Google Chrome浏览器中,它可以完美运行。 In Internet Explorer, the hidden carousel slide's loading spinner still shows on the screen.
在Internet Explorer中,隐藏的轮播幻灯片的加载微调器仍显示在屏幕上。 What is weird is switching to a new tab in Internet Explorer and then back into this tab, the extra spinners disappear.
奇怪的是,切换到Internet Explorer中的新选项卡,然后又回到该选项卡,多余的微调器消失了。 The text of Slide 1 and Slide 2 disappear though, it is the spinner that does not disappear.
虽然幻灯片1和幻灯片2的文本消失了,但微调器并没有消失。
Any ideas on what could be causing this issue in Internet Explorer? 关于在Internet Explorer中可能引起此问题的任何想法?
I fixed it by adding the following CSS. 我通过添加以下CSS对其进行了修复。
.carousel-item:not(.active){
visibility: hidden;
}
https://codepen.io/AliF50/pen/OzwKdm https://codepen.io/AliF50/pen/OzwKdm
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.