Vertical thumbnnail not registering selection of image on table device after swiping

[vvince86]

Hi guys, this is driving me crazy.  I added some custom code to add a vertical thumbnail to product page.  Everything is good, except when i use a tablet device and i swipe down on the thumbnail and then select an image , the screen goes back to the position of the previously selected image.  I have to press that image one more time for it to change the main product image.   I hope that makes sense, my website is :

https://ezesuperstore.com/products/0-12-multiplication-charts-times-table-cards-self-check-math-lear...

and below is the code i added for vertical thumbnail.  Any idea how to get this to work?

@media only screen and (min-width:900px) {
.product--small .thumbnail-list.slider--tablet-up li.thumbnail-list__item.slider__slide {
transform: rotate(-90deg);
width: calc(20% - .8rem);
}
.grid__item.product__media-wrapper slider-component.thumbnail-slider {
position: absolute;
top: 0;
transform: rotate(90deg);
width: 702px; /* manage width of small image */
left: 0;
transform-origin: left top;
height: 150px;
overflow: hidden;
}
.grid__item.product__media-wrapper {
position: relative;
padding-left: 100px;
}
.thumbnail-list.slider--tablet-up li.thumbnail-list__item.slider__slide {
transform: rotate(-90deg);
width: calc(20% - 0.8rem); /* decrease percentage and it will increase items */

}
}
}

[vvince86]

Hi thanks for your reply that is helpful info.  I am mainly wanted to be able to press another image so it updates the main product image after swiping.  But it doesn't register when i press another image.  This only happens if the image is off-screen.

[vvince86]

and only happens on tablet device