Images not displayed in Owl carousels when scrolling

[jjumper]

Hello,

When I scroll down in my pages which use multiple Owl carousels, sometimes, all the images belonging to a carousel are not displayed, but other carousels are displayed correctly. Images are loaded, I can see that in the ‘Network’ tab of Chrome’s development tool, but are not displayed. To see them, I have to scroll down, then up again, and I can see them.
Example: I have 10 carousels, when I scroll down, I can see correctly the images in carousels 1, 2, not 3, not 4, 5, 6, 7, not 8, 9 not 10. When I scroll up, I see correctly all the images.

The problem can be reproduced in your live preview demo:
– Go to https://preview.themeforest.net/item/porto-responsive-html5-template/full_screen_preview/4106987
– Clear the cache
– Select Elements
– Select Carousels
– Scroll down slowly

I can reproduce the problem almost 100% of the time. I have tested on different computers, phones, I have the issue with Chrome and Edge but it works correctly with Firefox and Samsung Browser.

Is there a way to solve this problematic issue?

Thanks for your support.

---

Template Version: 9.9.3

[Support]

Hello,

My suggestion is to avoid too much “appear-animation” in the page (use only you really want it) and change lazy load of images to browser default tag, so:

FROM (in all columns where you have that):

<div class="col-xl-4 col-lg-5 col-md-7  appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="300">

TO:

<div class="col-xl-4 col-lg-5 col-md-7">

AND…

FROM:

<img class="img-fluid lazyload" data-src="camellias/A/aarons-ruby-1.jpg" src="img/loader.gif" alt="Camellia Japonica 'Aaron's Ruby'" title="" width="318" height="318">

TO (in all images):

<img class="img-fluid" src="camellias/A/aarons-ruby-1.jpg" alt="Camellia Japonica 'Aaron's Ruby'" title="" width="318" height="318" loading="lazy">

* https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

---

[jjumper]

Thank you for your quick reply.
Unfortunately, it doesn’t work, I still have the same behaviour, you can check on the page.

Thanks

---

[Support]

This reply has been marked as private.

[Support]

You can also add ‘forceInit’: true in the carousels:

<div class="owl-carousel owl-theme nav-inside nav-inside-edge nav-squared nav-with-transparency nav-dark mt-3" data-plugin-options="{'forceInit': true, 'items': 1, 'margin': 10, 'loop': true, 'nav': true, 'dots': true}">

---

[Support]

And also a custom js to initialize all carousels that are not active:

(js/custom.js)

$(window).on('load', function() {

	setInterval(function () {
		try {

			$('.owl-carousel:not(.owl-carousel-init)').owlCarousel({
				forceInit: true,
				items: 1,
				margin: 10,
				loop: true,
				nav: true,
				dots: true,
				navText: [],
				refresh: false
			});


		} catch (err) {}
	}, 1000);

});

---

[jjumper]

Please accept my apologies, I forgot to upload my modifications and did my tests locally.

I now have included and uploaded your modifications.
With the last js, it seems now to work, I will do some additional tests tomorrow and will keep you updated.

Thanks a lot for your support

---

[jjumper]

Good morning,

I have done extensive testing and can confirm that everything works perfectly now.
Thanks a lot for your amazing support!

---

[Author]

Posts