How to remove friezes on the page when scrolling with a large number of sliders?

Question

JavaScript

I have a product catalog, each card has an owl slider, 10 pieces are displayed on the page, and the rest are loaded on a scroll.
The more products loaded, the stronger the page friezes become when scrolling. When there are 60 cards, it becomes hard to use.

Here's what's on my mind at the moment:
1. I read somewhere that you can listen not to every scroll, but to every 5th, but I didn't find how to do it.

2. There is an idea to catch the focus of the goods that are on the screen and initialize the slider for them, and when they go out of focus - deinitialize. I just don't understand how to do it.

Tell me about my ideas and / or offer your own

Here is the slider initialization code, I load it along with the content with each ajax request so that the slider works with arriving cards.

$(".owl-carousel").owlCarousel({
items: 1,
slideBy: 1,
loop: true,
dots: !1,
nav: !0,
navText: ["", ""],
navClass: ["swiper -button-prev", "swiper-button-next"],
lazyLoad: true,
lazyLoadEager:1,
checkVisibility: false,
animateIn:'fadeIn',
});

Answer 1

1) do not use owl, but write a custom slider that can work one at a time and not load the page
2) Do not show 60 sliders at once, and render sliders only those that the user sees, replace the rest with empty divs with sizes corresponding to the slider.

Answer 2

Most often I use slick-carousel, in terms of performance I did not test
https://kenwheeler.github.io/slick/