slick.jsのカルーセルでループさせずに最後まで行ったら一番最初に戻る

Question

ゾゾタウンで使われているようなこの商品ページの動きなのですが
http://zozo.jp/sp/shop/mrolive/goods/7972303/?did=21256171&rid=3093
はじめは右側にのみ矢印が現れて手動で最後までいったら右側のボタンがかわり、押したら最初にもどるという動きですが
これはslick.jsで実装可能でしょうか？（最後の画面にいくと現れるグレーアウトして二つのアイコンが現れる動きは不要です）
こちらの件に関して実装方法に詳しい方、 ご教授頂けましたら幸いです。
よろしくお願いいたします。

※スマホのみです。

現在指定しているオプション
fade: false,
infinite: false
arrows: false,
centerMode: true,

Comments

[karamarimo]

試したところPCではなくスマホとして開いた時にそのようなUIになりますが、そちらについての質問ということですか？

[curtainrail]

質問をみてくださりありがとうございます。 説明不足で失礼いたしました。スマホでみた場合となります。

[karamarimo]

では、その旨を質問文に追記したほうがよいかと思います。

[curtainrail]

ご指摘ありがとうございます。追記いたしました。

Answer 1

infinite: falseのときは、１番目のスライドのときは左ボタンに.slide-disabledクラスがつき、右ボタンも同様です。

これを利用して、１番目のスライドでは左ボタンを隠し、最後のスライドでは右ボタンの見た目を変えることができます(下の例では公式の css theme と同様に::beforeを使ってます)。

また、最後のスライドから右ボタンで最初のスライドに戻るには、クリック時にそれが.slide-disabledであるかをチェックすればできます。

Demo(JSFiddle)

const $slick = $(".container")

$slick.slick({
  fade: false,
  infinite: false,
  arrows: true,
  centerMode: true,
  prevArrow: '<button class="slick-prev"></button>',
  nextArrow: '<button class="slick-next"></button>',
});

$('.slick-next').click(function() {
  if ($(this).hasClass('slick-disabled')) {
    $slick.slick('slickGoTo', 0)
  }
})

.slick-prev.slick-disabled {
  visibility: hidden;
}
.slick-prev::before {
  content: '<';
}
.slick-next.slick-disabled::before {
  content: '<<';
}
.slick-next::before {
  content: '>';
}

Comments

[curtainrail]

大変丁寧にご回答いただきありがとうございます！
無事組み込むことができました。とても助かりました。
お礼が遅くなりましたことお詫び申し上げます。