Good morning everyone, Please help me with this problem and thank you in advance. I have a list of images and data that are not loaded immediately and synchronized when loading the page for the first time, always the image of the last carousel item is fully adjusted to the parent div that surrounds the carousel being 100% tall and 100% wide, but only for about 1 second, this in all browsers.
There are two prints that depict this problem.
Stretches when loading the page for the first time only.
Imagesarenormalafter1secondofthebug.
Obs.Thisproblemalwaysoccurswiththelastiteminthecarousel,regardlessofthenumberofitems.
HTMLcode(itisgroupedbecauseitislarge):
CSSCall:
<linkrel="stylesheet" href="assets/css/external/owl.carousel.min.css">
Calling scripts:
<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>
Carousel configuration:
$(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
}
}
});
});