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

Question

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: https://fewbirds.tastewp.com/produkt/test-product/