SlickのnextArrowで画像を指定した場合にbreakpointで画像が消せません。

Question

前提・実現したいこと

質問をご参照いただきありがとうございます！
slickの矢印ナビをカスタマイズ方法を紹介しようと思うの「デフォルトのものを変更する」を参考に、Slick用のjsファイルでnextArrowに自分で準備した矢印を指定しています。
レスポンシブデザインに対応するため、max-width:1150pxでその矢印の画像が消えるようにしたいです。

発生している問題・エラーメッセージ

1150px以上ではきちんと矢印が表示されて上手くいくのですが、画面サイズを矢印が消えていてほしい1150px未満にすると、矢印が巨大化して表示されてしまってうまくいきません（画面いっぱいに矢印が広がってしまいます）。
知識が不十分で大変恐縮ですが、どうぞよろしくお願いします。
どうぞよろしくお願いいたします。

該当のソースコード

<div class="slider">
  <div class="slide slide1">①</div>
  <div class="slide slide2">②</div>
  <div class="slide slide3">③</div>
</div>

.slider {
  width: calc(100% - 40px);
  margin: 0 auto;
  position: relative;
}
 
.slide {
  font-size: 42px;
  font-weight: bold;
  text-align: center;
  line-height: 300px;
}
 
.slide1 {
  background-color: #b6ddff;
}
 
.slide2 {
  background-color: #b6ffbe;
}
 
.slide3 {
  background-color: #ffb6e3;
}

.next-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 30px;
  z-index: 1;
}

$(function() {
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    dots: false,
    fade: true,
    nextArrow: '<img src="arrow-right.svg" alt="矢印" class="next-icon">',
    responsive: [{
      breakpoint: 1150,
      settings: {
          nextArrow: false
      }
    }]
  });
});

試したこと

始めはif/elseで書けないか試行錯誤していたのですが、slickスライダーのオプションを条件分岐を見て上記の通り書きましたが質問内容に書いたとおり上手くいかず、false以外にnextArrowの内容を打ち消す書き方が他に無いか調べましたが見つけられませんでした。

補足情報（FW/ツールのバージョンなど）

使用ブラウザ：Chrome
使用エディタ：Visual Studio Code

Comments

[Lhankor_Mhy]

ご提示のリンク二つを拝見しましたが、
nextArrow: false
という書き方を見つけることができませんでした。
どこに書いてあるのかお示しください。

[butanokakuni]

すみません、特に記載は無いのですが、表示させたnextArrowを非表示にするためにnextArrow: false と書いた（デフォルトの矢印を表示させない場合はnextArrow: false と書くため）のですが、非表示にならなかったため質問させていただきました。

Answer 1

nextArrow
: type: string (html|jQuery selector) | object (DOM node|jQuery object)

slick - the last carousel you'll ever need

とあり、falseはこれらに当てはまらないので動作しないのだと思います。
表示に影響を与えずクリックができないようなノードやHTMLなどを渡すのが、手っ取り早そうです。
たとえば："<!---->"やdocument.createComment('')

Comments

[butanokakuni]

ご回答ありがとうございます。
そういうことだったのですね。document.createComment('')だと画面を回転させた際にやはり巨大な矢印が出現して消えなくなってしまうのですが、"<!---->"を使ったところnextArrowで表示した画像をmax-width:1150pxで消すことができました！

大変助かりました。
また、Slickのサイトの書いてある箇所の引用文も掲載していただき大変ありがたいです。
ありがとうございました！！

[Lhankor_Mhy]

お役に立てたようで何よりです