iPhone実機でslickが正常にフェード、スライドしない

発生している問題

slickを実装したところ、PCブラウザ上ではきちんと動作するが、
iphone実機だと画像切り替え時にフェードしない、また、画像をタッチするとスライドショーが停止してしまいます。
これを改善したい

該当のソースコード

HTML
1<ul id="slider">
2<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/1.jpg" alt="画像"></li>
3<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/2.jpg" alt="画像"></li>
4<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/3.jpg" alt="画像"></li>
5<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/4.jpg" alt="画像"></li>
6<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/5.jpg" alt="画像"></li>
7<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/6.jpg" alt="画像"></li>
8</ul>
9<ul id="thumbnail-list">
10<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/1.jpg" alt="画像"></li>
11<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/2.jpg" alt="画像"></li>
12<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/3.jpg" alt="画像"></li>
13<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/4.jpg" alt="画像"></li>
14<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/5.jpg" alt="画像"></li>
15<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/6.jpg" alt="画像"></li>
16</ul>

CSS
1#slider {
2width: 95%;
3margin: 0 auto 30px;
4}
5
6.slide-item img {
7width: 100%;
8}
9
10#thumbnail-list {
11max-width: 95%;
12margin: 0 auto;
13display: flex;
14justify-content: space-between;
15flex-wrap: wrap;
16}
17
18.thumbnail-item {
19flex: 0 1 12%;
20margin-bottom: 10px;
21box-sizing: border-box;
22position: relative;
23}
24
25.thumbnail-item:after {
26content: '';
27background-color: rgba(0, 0, 0, 0.5);
28position: absolute;
29display: block;
30top: 0;
31left: 0;
32width: 100%;
33height: 90%;
34opacity: 1;
35transition: .3s opacity linear;
36}
37
38.thumbnail-item.thumbnail-current:after {
39opacity: 0;
40}
41
42.thumbnail-item img {
43width: 100%;
44margin: 0 auto;
45}
46
47@media screen and (max-width: 640px){
48#slider {
49margin: 0 auto 10px;
50}
51	
52.thumbnail-item:after {
53height: 80%;
54	}
55}

jquery
1<script type="text/javascript">
2$(function(){
3var slider = "#slider"; 
4var thumbnailItem = "#thumbnail-list .thumbnail-item";
5
6$(thumbnailItem).each(function(){
7var index = $(thumbnailItem).index(this);
8$(this).attr("data-index",index);
9});
10
11$(slider).on('init',function(slick){
12var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
13$(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current");
14});
15
16$(slider).slick({
17autoplay: true,
18arrows: false,
19fade: true,
20waitForAnimate: false,
21pauseOnFocus: false,
22pauseOnHover: false,
23pauseOnDotsHover: false
24});
25
26$(thumbnailItem).on('click',function(){
27var index = $(this).attr("data-index");
28$(slider).slick("slickGoTo",index,false);
29});
30
31$(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
32$(thumbnailItem).each(function(){
33$(this).removeClass("thumbnail-current");
34});
35$(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
36});
37});
38</script>