Topic: full page carousel white flash issue
I can't seem to fix the issue with full page carousel. I have a full page carousel with bg image and overlay. Se test @ http://gbm.fxt.biloit.com/
I've read other posts with same problem but no solution provided in the forum, only in private email! (not very usefull in forums)
Could you please provide me with some info on how to get rid of this issue?
Best regards
Carl-Michael
Add comment
Marta Szymanska staff pro premium answered 7 years ago
Hi,
I'm sorry for this problem. However, we are during updating our documentation and other pages, so, I think it will be fixed soon. Please try this code for a carousel:
<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide carousel-fade carousel-half" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-1z" data-slide-to="1"></li>
<li data-target="#carousel-example-1z" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="view hm-black-light h-100">
<img class="d-block h-100 w-lg-100" src="https://mdbootstrap.com/img/Photos/Others/city11.jpg" alt="First slide">
<div class="mask"></div>
</div>
</div>
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item h-100">
<img class="d-block h-100 w-lg-100" src="https://mdbootstrap.com/img/Photos/Others/intro2.jpg" alt="Second slide">
</div>
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="view hm-black-light h-100">
<img class="d-block h-100 w-lg-100" src="https://mdbootstrap.com/img/Photos/Others/city13.jpg" alt="Third slide">
<div class="mask"></div>
</div>
</div>
<!--/Third slide-->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
Best,
Marta FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No