Create Multiple Robust sliders that can slide images, content boxes, reviews, etc.
The intention is to avoid unnecessary coding, and the slider should be written once. The parent slider that is actually sliding should stop sliding when its last child is visible in the browser, irrespective of whether we are sliding one image/content box in a click or CSS is arranged in such that 2,3,4, etc children are visible at one instance. There may even be a gap. The idea remains the same stop sliding when the last child is visible.
I have created a thumbnail now that is using the same slider logic but fails to stop when the last child is visible because it is programmed on some different maths. Should I go to Intersection observer API or there is a way in the direction I was trying to make changes?
The idea is to visualize as many complicacies, but the logic should not break or work selectively.
If you are going to have multiple sliders on the same page then you will need to re-think the whole logic as the code will need to automatically be reusable and therefore you should not have any ids in the slider and make it work only with classes.
You will need to identify all the components inside the slider based on the parent slider class.
When you click a slider button to slide the item you only want so slide that slider and not all the other sliders so you find the item based on the current slider parent and do your stuff there. You will have to change the logic for the slideVal (the number of items you have clicked) as you can no longer have one variable to hold that value. You would either need to set up an array of values (one for each slider) or store the value in a data attribute on that element so you can reuse and change it later.
The same applies to any other items that you need to keep track of (such as number of slides etc.)
You need to re read my post #15 as to wht that won;t work. If the window is resized smaller while a number of items have been sliding then the last item will never be visible as it is now half a mile off to the left. I explained that in full detail in my other post.
As I have said a couple of times now you always know when the last slide is in view because at the start you know how many slides you have and then using media queries you know how many items across there are. The answer can be found with Math and you do not need the intersection observer to find that out. In last years demo I gave an example with the intersection observer but is seems wasted effort to me and a waste of processing power. However that last years demo is doing everything you want except for multiple versions.
I would suggest that this current demo could be updated with the matchmedia query js logic to determine if a slide is visible or not (see the old demo for a similar routine).
The first thing you will need to work on is making the code agnostic so that it works on multiple sliders and not tied to one ID. Then think about how you are going to store the different slide values (and other stuff) if you have half a dozen sliders on the page. It would then be very important to have slim code and work out as much as you can with math before accessing elements.