Auto-move (scroll) product thumbnails on product page image slider

I’ve got a problem with the product image slider on the product page. I used flex to display thumbnails in one row. There are 5 thumbnails in a row. Images move correctly using direction arrows. How to set up auto-scroll to the next thumbnail in a row? Now it moves (main image changing) but 5 thumbnails in a row are still static. I set overflow-x to auto, so you can see there are the next images in a row.

Basic code:

div.product div.images .flex-control-thumbs {     display:flex;     flex-wrap: nowrap;     overflow-x: auto;     margin: 0 50px; }  div.product div.images .flex-control-thumbs li {     display: flex;     overflow-x: visible;     flex: 1 0 20%; } 

My test site – you can see how it works: