IE表示のみslickを非表示にし、静止画を表示させたい

Question

【実現したい動き】
IE8〜11で見た時にslickを非表示にして、画像を表示させたい。

【現状】
以下のコードで実装したらIE11では思い通りの表示になりましたが、
IE11以下のバージョンではうまく表示されませんでした。
（その他のブラウザではslickが正常に動いています。）

<script type="text/javascript">
  $(document).ready(function(){
    var $slider  = $('.slider');
    var $slide   = $slider.children();
    var slideLen = $slide.length;
    $slider
    .slick({
      dots: false,
      autoplay: true,
      autoplaySpeed:2000, // スライド切り替えの時間を設定
      infinite: false,
      pauseOnHover:true,
      slidesToShow: 1,
      slidesToScroll: 1
    })
    .on('afterChange', function() {
      var $self = $(this);
      if((slideLen - 1) <= $self.slick('slickCurrentSlide')){
        $self.slick('slickSetOption', 'autoplay', false);
      }
    });
  });

  const ie_img = document.querySelector('.ie-display');
  ie_img.style.display = 'none'
  const slider = document.querySelector('.slider');
  const userAgent = window.navigator.userAgent.toLowerCase();
    if(userAgent.indexOf('msie') != -1 ||
            userAgent.indexOf('trident') != -1) {
              slider.style.display = 'none';
              ie_img.style.display = 'block';
    } else if(userAgent.indexOf('edge') != -1) {
        // console.log('Edgeをお使いですね');
    } else if(userAgent.indexOf('chrome') != -1) {
     

    } else if(userAgent.indexOf('safari') != -1) {
        // console.log('Safariをお使いですね');
    } else if(userAgent.indexOf('firefox') != -1) {
        // console.log('FireFoxをお使いですね');
    } else if(userAgent.indexOf('opera') != -1) {
        // console.log('Operaをお使いですね');
    } else {
        // console.log('そんなブラウザは知らん');
    }
  </script>

【実現したい動き】にするためにはどうすればいいか全くわからない状態となって困っております。
わかる方がいらっしゃいましたらご教授いただければ幸いです。
よろしくお願い致します。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
あと、使っているjQueryのバージョンもご提示ください。

[emiri]

ご指摘頂きありがとうございます。
修正します。

[miyabi_pudding]

IE8の時、本当に一つ目のif文を通過してますか？？

[miyabi_pudding]

また、

https://www.google.co.jp/amp/s/www.it-swarm-ja.tech/ja/javascript/ie8%25E3%2581%25AFqueryselectorall%25E3%2582%2592%25E3%2582%25B5%25E3%2583%259D%25E3%2583%25BC%25E3%2583%2588%25E3%2581%2597%25E3%2581%25A6%25E3%2581%2584%25E3%2581%25BE%25E3%2581%259B%25E3%2582%2593/1073148737/amp/

の内容を確認してみてください。
IE8では、querySelectorが動作しないパターンが存在するとのことです。

[emiri]

IE８では表示が崩れるので通過していないのだと思います。

[emiri]

>IE8では、querySelectorが動作しないパターンが存在するとのことです。
ありがとうございます。
ということは、IE８は諦めるしか無いでしょうか。

[miyabi_pudding]

> 崩れるので通過していないのだと思います。

それを確信にしないと、解決できません。
console.logなどで、通ってほしいところを通ってるか確認しながらやりましょう。

> ということは、IE８は諦めるしか無いでしょうか。

な、なぜそんな極端になるんですか？
URLの記事の内容を見れば、まだ試せることがあるはずです。

ただ、IE8は化石みたいなブラウザなので、（世界的にも、日本国内においても使ってる人は0.01%以下でしょう。）対応の必要はないとは思いますけどね。

[emiri]

ご教授頂き、ありがとうございます。

>URLの記事の内容を見れば、まだ試せることがあるはずです。
すみません、せっかく送って頂いのにjavascriptの知識がほぼないので、
読んでもどうして良いか分かりませんでした。

>ただ、IE8は化石みたいなブラウザなので、（世界的にも、日本国内においても使ってる人は0.01%以下でしょう。）対応の必要はないとは思いますけどね。
私もそう思い、クライアントにも説明したのですが
どうしても表示させておきたいようで、、、

コードの製作者に記事を読んでもらい、教えて頂いたように試してもらおうと思います！
ご回答ありがとうございました。

[miyabi_pudding]

し、質問者さんが書いたコードじゃないんですか・・・。
それは、コード制作者さんに直接質問させるべきかと思いますが・・・。
とかく、まだ試せることはあるかと思いますよ。

[m.ts10806]

そもそもIE自体の使用をやめるべきでは(社内システム限定でIE以外使えない閉鎖環境除く)

[emiri]

>それは、コード制作者さんに直接質問させるべきかと思いますが・・・。
そうですよね、、
ありがとうございます。

[emiri]

>そもそもIE自体の使用をやめるべきでは
ご回答ありがとうございます。
クライアントの周りはIEユーザーが多いとのことで、、、
あまりに行き詰まったら別のデザインを検討しようと思います。
ありがとうございました。

Answer 1

IEの判別方法はこんなものがあります。

if(document.documentMode){
  // IEの時
}else{
  // IE以外
}

参考

Comments

[kyoya0819]

対応は5~11なので、まぁ不足はないと思います。