Ich habe hunger

あふりかエンジニア、アフリカ向けのB2BのSaaSを開発する

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

以下はめっちゃ昔の記事で今ではここのようにすると良いらしいですので、以下のリンクかドキュメント読んでくださいね!ちゃお!

github.com


    • -

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を書かないといけないですね(´・ω・`;)

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