我滑动图像时抖动

Question

有一个在线商店的滑块，用于产品的多个图像。由我自己用jquery制作。如果您非常快速地引导光标，图像就不会改变，并且相互重叠。怎么解决？

如果有人有类似的插件插件，那就太好了。

CodePen：https://codepen.io/Alexxosipov/pen/OxQaWv

<div class="product__slider">
        <div class="product__slider-photo">
            <img src="https://pp.userapi.com/c841024/v841024287/1c91c/h8XGWuDBjn8.jpg" alt="51 роза" data-id="0">
            <img src="https://pp.userapi.com/c639816/v639816421/38089/GjCdk2X_ifI.jpg" alt="51 роза" data-id="1">               
            <img src="https://pp.userapi.com/c837433/v837433282/4d8fe/UEbY-oQHoD4.jpg" alt="51 роза" data-id="2">   
        </div>
        <div class="product__slider-nav">
            <img src="https://pp.userapi.com/c841024/v841024287/1c91c/h8XGWuDBjn8.jpg" alt="51 роза" data-id="0">
            <img src="https://pp.userapi.com/c639816/v639816421/38089/GjCdk2X_ifI.jpg" alt="51 роза" data-id="1">               
            <img src="https://pp.userapi.com/c837433/v837433282/4d8fe/UEbY-oQHoD4.jpg" alt="51 роза" data-id="2">
        </div>          
    </div>

CSS（LESS）：

.product {
 &__slider {
    width: 55%; 
box-sizing: border-box;

    padding: 15px;
    min-height: 580px;

    background-color: #fff;
    &-photo {
        padding: 15px;
        box-sizing: border-box;
        height: 600px;

        position: relative;
        img {
            display: block;
            margin: 0 auto;


            transition: .25s;
            max-width: 100%;
            max-height: 100%;
            height: auto;
        }           
    }   
    &-nav {

        margin: 30px auto 0;
        display: flex;

        justify-content: center;
        img {               
            margin-right: 10px;
            height: 120px;
            max-width: 120px;
            object-fit: cover;
            width: auto;
            display: block;
            margin: 5px;
        }
    }           
}

}

JS（jQuery）：

var currentSlide = $(".product__slider-photo img:first").attr('data-id');


$(".product__slider-photo img").hide();
$(".product__slider-photo img:first").show();



$(".product__slider-nav img").hover(function(){
    var dataId = $(this).attr('data-id');       
    if (currentSlide != dataId) {           
        $(".product__slider-photo img").css('display', 'none');
        $('.product__slider-photo img[data-id="'+dataId+'"]').fadeIn(150);
        currentSlide = dataId;
        console.log(currentSlide);          
    }       
});