質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.22%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 565

masaki822

score 5

発生している問題

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

該当のソースコード

<ul id="slider">
<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/1.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/2.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/3.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/4.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/5.jpg" alt="画像"></li>
<li class="slide-item"><img data-lazy="https://www.jungleocean.com/demo/jquery-slick/images/6.jpg" alt="画像"></li>
</ul>
<ul id="thumbnail-list">
<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/1.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/2.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/3.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/4.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/5.jpg" alt="画像"></li>
<li class="thumbnail-item"><img src="https://www.jungleocean.com/demo/jquery-slick/images/6.jpg" alt="画像"></li>
</ul>
#slider {
width: 95%;
margin: 0 auto 30px;
}

.slide-item img {
width: 100%;
}

#thumbnail-list {
max-width: 95%;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.thumbnail-item {
flex: 0 1 12%;
margin-bottom: 10px;
box-sizing: border-box;
position: relative;
}

.thumbnail-item:after {
content: '';
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 90%;
opacity: 1;
transition: .3s opacity linear;
}

.thumbnail-item.thumbnail-current:after {
opacity: 0;
}

.thumbnail-item img {
width: 100%;
margin: 0 auto;
}

@media screen and (max-width: 640px){
#slider {
margin: 0 auto 10px;
}

.thumbnail-item:after {
height: 80%;
    }
}
<script type="text/javascript">
$(function(){
var slider = "#slider"; 
var thumbnailItem = "#thumbnail-list .thumbnail-item";

$(thumbnailItem).each(function(){
var index = $(thumbnailItem).index(this);
$(this).attr("data-index",index);
});

$(slider).on('init',function(slick){
var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
$(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current");
});

$(slider).slick({
autoplay: true,
arrows: false,
fade: true,
waitForAnimate: false,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false
});

$(thumbnailItem).on('click',function(){
var index = $(this).attr("data-index");
$(slider).slick("slickGoTo",index,false);
});

$(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
$(thumbnailItem).each(function(){
$(this).removeClass("thumbnail-current");
});
$(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
});
});
</script>

試したこと

オプションを色々と試しましたが解決には至りませんでした。

【追記】
フェードしないのはchromeだけのようです。safariだとうまくフェードしましたが、やはり画像をタッチするとautoplayが停止してしまいます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る