jqueryのフェードイン・アウトで画像切り替えをすると画面のリサイズで画像の切り替わりが早くなってしまう

とあるサイトのFVで、jqueryのフェードイン・アウトを使って画像の切り替えを行っています。

全画面での初期表示時は問題なく表示されるのですが、小さな画面で開いたり、画面のリサイズをおこなうと、
画像の切り替わりが早くなってしまいます。
こちらを回避したい場合、どの部分を修正すればよいでしょうか。
またもっと効率的な方法がありましたら教えていただきたく、お願いいたします。

以下設定しているコードです。

HTML
1<section class="mainView">
2  <div id="slide">
3    <ul>
4      <li><img class="active" src="sample01.jpg" alt=""></li>
5      <li><a href="sample02.jpg" alt=""></a></li>
6      <li><a href="sample03.jpg" alt=""></a></li>
7      <li><a href="sample04.jpg" alt=""></a></li>
8    </ul>
9  </div>
10</section>
11

CSS
1.mainView #slide {
2  height: 340px;
3  margin: 0 auto;
4  position: relative;
5}
6
7.mainView #slide li {
8  overflow: hidden;
9}
10
11.mainView #slide li img {
12  position: absolute;
13  left: 50%;
14  top: 165px;
15  transform: translate(-50%, -50%);
16  z-index: 8;
17  height: 340px;
18  margin: auto;
19}
20

Javascript
1// TOPスライドショー
2$(window).on("load resize",function(){
3  var slide = document.getElementById("slide");
4  if (slide){
5    // 設定
6    var $winW = window.innerWidth; // 横幅
7    var $winH = 340; // 高さ
8    if($winW > 480){
9      var $winH = 340;
10    }else{
11      var $winH = 140;
12    }
13    var $interval = 5000; // 切り替わりの間隔（ミリ秒）
14    var $fade_speed = 2000; // フェード処理の早さ（ミリ秒）
15    $("#slide ul li").css({
16      "position": "relative",
17      "overflow": "hidden",
18      "width": $winW,
19      "height": $winH
20    });
21    $("#slide ul li").hide().css({
22      "position": "absolute",
23      "top": 0,
24      "left": 0
25    });
26
27    $("#slide ul li:first").addClass("active").show();
28    setInterval(function () {
29      var $active = $("#slide ul li.active");
30      var $next = $active.next("li").length ? $active.next("li") : $("#slide ul li:first");
31      $active.fadeOut($fade_speed).removeClass("active");
32      $next.fadeIn($fade_speed).addClass("active");
33    }, $interval);
34  }
35});