I have a big application and often times it needs more than 3 carousel items and have a bunch of elements inside of it.
I notice that with ST 2, only 3 carousel inner items are rendered and served as the container for inner elements and it’s reused again if it has more than 3 items.
I also notice that even though it uses 3 carousel items, it renders the inner elements/panels on the dom even though it’s not painted on the screen. I have seen this behavior when I stuff each carousel item with scrollable panels with images. On every carousel item I scroll to the bottom of panel until I reach the last carousel item, say the 20th. I notice that when I go back, every panel is still scrolled to the bottom. When I also made a network inspection, the images for all the inner panel of the carousel are being loaded even though I’m still on the first carousel item.
I want to know if this is really the case that somewhere in the dom, the inner panel of the carousel items are cached. I also want to know how I can optimize my app to only render and invoke events when the carousel item is active. I don’t want to fire all events at once for the 20 carousel items with inner panels. I also want to have small memory footprint and want to destroy the inner panels when it’s not the active carousel item.
Thank you in advance for helping.