スライダー

JavaScript

2021/3/23

「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方

スライダープラグイン「Slick.js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。 状況 ボタンを押すと1度スライドが動くが止まる。マウスカーソルをブラウザから外すと再びスライダーが動き出す このときにSlick.jsでスライド対応していた部分はスライドボタンをCSSのabsoluteで位置変更していたことを思い出しました。 そのためマウスカーソルが乗っているときのオプションが用意されているのでは?という結論に達したところカーソル系のオプションがあ ...

JavaScript

2021/3/23

スライダープラグイン「slick.js」の使い方・カスタマイズ方法/ スライドドットの大きさを変える、色を変える

「Slick.js」の使い方・カスタマイズ方法 「Slick.js」の使い方・カスタマイズ方法でよくある事例のメモです。 スライドのドットの大きさを変更する CSSで調整できます。 疑似要素の中身にcontent: "•";を使ってスライダードットを再現しています。 スライドのドットの大きさはfont-sizeで変化します。 191行目の.slick-dots li button:beforeのfont-sizeを変更します。 .slick-dots li button:before { font-fam ...

Slick.js

JavaScript

2021/3/23

「Slick.js」指定できるオプション豊富な定番jQueryスライダープラグイン

Slick.js slickは定番のJavaScriptスライダープラグインです。 jQueryで動作します。 公式サイトでのデモソースパターンとネットでの拡張サンプルコード事例が豊富なので 比較的使いやすいスライダープラグインだと感じます。 slick ライセンス MITライセンス/個人無料・商用無料 slickはjQueryを利用します。 slick デモサンプルURL/公式ドキュメント ポイント slick - the last carousel you'll ever need slick.jsの ...

JavaScript

2021/3/23

「Slick.js」でサムネイルはスライドしないで固定させる実践的な使い方

案件でスライドを実装しないといけなくなり、Slider Proで対応しようとしたのですが、 「1枚の画像のときにスライダーを表示させないでくれ」と言われてしまい1枚の画像のケースがありえるの?とツッコミしたくなりました。 スライダーを使うのだから複数枚画像は用意するでしょう!というのは製作者側の勝手な意見なのでしょうかねえ。 さて、Slider Proを見直したところ、矢印部分や背景にCSSで編集を加えていたため1枚画像の場合に矢印が表示されてしまう事態となってスライダーをSlickへ変更しました。 sl ...

JavaScript

2020/7/23

スライドJSプラグイン「Slider Pro」の実践的な使い方

JavaScriptのスライドプラグインはたくさん種類がありますが、 その中でも設定項目の多い「Slider Pro」の使い方です。 Slider Proの良いところとしては ・ブレイクポイントを使ったレスポンシブ対応 ・スワイプ検知 ・サムネイルの大きさ指定 これらの項目が初期状態から設定されていることです。 Slider ProはjQueryを利用します。 Slider Pro ライセンス MITライセンス/個人無料・商用無料 Slider Pro デモサンプルURL/公式ドキュメント ポイントSli ...

© 2021 さくらいらぼWEB版 /個人ブログ