Thumbnail scroller with preview to next slide

[JamesIves]

Good morning;

I'm trying to use the Angular version of Swiper to display a main carousel image, followed by a series of thumbnails, so far this works great, however if I use a decimal in the thumbnail tracks slidesPerView with freeMode as false I end up running into problems. The problem I'm running into is that when the partially viewed slide is selected it doesn't scroll the thumbnail track so it's in view. I've tried a number of different properties but I can't seem to figure out what the best way to do this is. Ideally when the partially viewed slide is clicked it will scroll the track to the next set of slides. I feel like I can probably hack around this using slideChange on the top slider and force the thumbnail slider to scroll to a given index, but it feels like a bit of a hack.

The version I'm basing this off is this: https://codesandbox.io/s/b9wfof?file=/src/app/app.component.ts - The only changes I've made from this layout is the following. You can reproduce this by clicking on the partially visible thumbnail and it will select it without advancing the thumbnail track so the entire thumbnail is in view.

[slidesPerView]="4.2"
[freeMode]="false"

Would appreciate any help if possible 🙏🏻