Ich lerne Ruby on Rails for Africa

Railsとアフリカで苦戦するブログ

レスポンシブ対応のスライドギャラリーのslickで強制的に左右のボタンを出す方法

slick - the last carousel you'll ever need

めちゃめちゃ高機能でレスポンシブ対応なslickなんですが、

気を利かせすぎてくれて、不必要な時には左右に動かすボタンが出ない!


で、強制的に出す方法はないかと思い探していたら、同じ仲間が居ましたw


Hello. Is there any way to force right/left buttons to always appear even if they are not needed?

Force left/right buttons to appear · Issue #277 · kenwheeler/slick · GitHub

一旦、arrowsプロパティをfalseにして非表示にする。

$('.carousel-selector').slick({
  arrows: false,
});||<

左右ボタンをして表示したいDOMを適切な場所に表示(・ω・´)
左側にleft-selector, 右側にright-selectorというclassを付与して、
それぞれをクリックした時のアクションを登録!

>||
$('.left-selector').on('click', function(){
  $('.carousel-selector').slickNext();
});
$('.right-selector').on('click', function(){
  $('.carousel-selector').slickPrev();
});

これでOK!

でも、左右を押せないときに
ボタンの色変えたり、画像変えたりとかは
ごりごりっとjsを書かないといけないですね(´・ω・`;)

まぁ、一旦やりたいことはこれで完了₍₍⁽⁽(ી(*゚▽゚*)ʃ)₎₎⁾⁾ノリノリ!