0
Good morning, you guys, Please help me with this problem and I appreciate it. I have a list of images and data that are not immediately loaded and synchronized when loading the page for the first time, always the image of the last item of the Carousel is fully adjusted to the parent div that surrounds the Carousel being, 100% height and 100% width, but only for about 1 second, that in all browsers.
Here are two prints that depict this problem.
Gets all stretched out by loading the page for the first time only.
Images are normal after 1 second of bug.
Obs. It is always a problem with the last item of Carousel, regardless of the amount of items.
HTML code (Is grouped as it is large):
Called CSS:
<link rel="stylesheet" href="assets/css/external/owl.carousel.min.css">
Script call:
<link rel="stylesheet" href="assets/css/external/owl.carousel.min.css}">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="assets/js/external/owl-carousel/owl.carousel.min.js"></script>
<script src="assets/js/external/owl-carousel/config-home-user.js"></script>
Configuration of the Carousel:
$(document).ready(function() {
// CONFIG CAROUSEL OF THE HOME USER
$('.owl-carousel').owlCarousel({
stagePadding: 50,
loop: true,
margin: 0,
nav: true,
margin: 20,
autoWidth: false,
navText: ['<i class="far fa-angle-left" title="Anterior"></i>', '<i class="far fa-angle-right" title="Seguinte"></i>'],
responsive: {
0: {
items: 1,
loop:false
},
500: {
items: 2,
loop:false
},
800: {
items: 3,
loop:false
},
1000: {
items: 4,
loop:false
}
}
});
});
Young also put your html and if used some CSS. If you have a link to your project better yet!
– hugocsl
Probably this is because it is still rendering the page and has not called its function
owlCarousel. I had this problem trying to start withdisplay: nonein your Dashboard and then after calling the functionowlCarouselremoves thedisplay: nonewithjquery.– Erick Zanetti
In fact this must be happening with all the items, and only the last one appears because it sits on top of the others. The interesting thing is to do more or less as the friend Erick said, but instead of
display: noneI would putopacity: 0and after page loading,opacity: 1...– Sam
You can try for
rel="preload"in tags that indexes scripts to see if load first and improve this bug– hugocsl
Thanks guys, really! It worked with the solution proposed by dvd.&#It actually took a little longer to render, because there was so much on the page, just like Erick Zanetti said. Thank you very much to everyone who tried to help.
– Moisesmagno