slickを1ページに複数設置したらiosのブラウザがクラッシュしてしまう
Q&AClosed
解決したいこと
html（1ページ内）にmodal window15個、そのmodalに各1つのサムネイル付きスライドショーを設置しようとしています。
PCのブラウザの表示では問題なかったのですが、iOSのブラウザ（safari/chrome）でチェックしたら
「（サイトURL）で問題が発生しました」という表示が出てサイトを見れなくなりました。
読みこむ内容が多い（重い）のが原因ではないかと思うのですが、どのようにすれば解消できるか教えていただけますでしょうか。
該当するソースコード
<script>
(function($) {
"use strict";
$(".slider").each(function() {
$(this).slick({
autoplay: true,
arrows: true,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: "#" + $(this).attr("id") + "-nav"
});
});
$(".slider-nav").each(function() {
$(this).slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
focusOnSelect: true,
centerMode: true,
centerPadding: 0,
asNavFor: "#" + $(this).attr("id").replace("-nav", "")
});
});
})(jQuery);
</script>
<!--スライダーhtml-->
<div class="slide-container">
<div class="slider" id="slider1">
<div class="slick-img">
<img src="images/dummy.jpg" />
</div>
<div class="slick-img">
<img src="images/dummy.jpg" />
</div>
<div class="slick-img">
<img src="images/dummy.jpg" />
</div>
</div>
<div class="slider-nav" id="slider1-nav">
<div class="thumbnail-img">
<div class="thumbnail-inner">
<img src="images/dummy.jpg" />
</div>
</div>
<div class="thumbnail-img">
<div class="thumbnail-inner">
<img src="images/dummy.jpg" />
</div>
</div>
<div class="thumbnail-img">
<div class="thumbnail-inner">
<img src="images/dummy.jpg" />
</div>
</div>
</div>
</div>
自分で試したこと
上記のスライダーのjsを取り除くとエラーは発生しませんでした。
0