nestable slider renders very slowly and irregularly both in the editor and in the front end. Especially if we have used query loop in it. The same issue causes CLS to suffer significantly if we use the nestable slider (especially at the beginning of the page). It is interesting to know that if we use the slider element, the CLS is still 0. But nestable slider…
Please see the screenshot below. The first screenshot is when the nestable slider is at the beginning of the page. And the second shot, the nestable slider has been deleted.
This is a basic problem with JS sliders that we can’t prevent across the board since it depends on what your slider contains (and possibly the slider settings). In your case, the images are probably loaded before the JS.
The first thing is that there is only one button and heading element in the nestable slider. There is no image in it.
But you are right. It doesn’t seem to be related to bricks. But I remember that there was a similar problem in Jet Woobuilder plugin and I reported it and it was fixed. Of course they use swiper.
But the thing is that on the splide js website when I check the demo sliders, there is no problem rendering them.
Well, the first thing I see in your example link is a nestable slider that contains images
Again, if you share an example link, please ensure it only contains the problem you report. Otherwise, the link is not helpful because it just leads to confusion.
Regarding the splide demos: Only in the “splide premium” slider images are used + CSS (::before), which may prevent a possible CLS. This kind of “fix” you can also find in one or the other swiper js discussion on the topic.
Again, if you share an example link, please ensure it only contains the problem you report. Otherwise, the link is not helpful because it just leads to confusion.
