Slick.jsを利用したスライド・カルーセルの実装
Slick.jsというJavaScriptライブラリを利用してカルーセルを作成する実装のサンプルです。
※ こちらはあくまで利用サンプルであり、サポート範囲外です。同じように実装する際には最低限HTMLの知識が必要になります。
手順
- PCでNotionを開いて画像カラムで横並びに設置します。その際に画像の横幅を操作するとその横幅に固定されてしまうので、アップロードした状態から動かさないようにします。
- 実装したい構成のCSS及びScriptをコピーして、管理画面からページのHTML挿入で挿入します。その際 画像を囲む .notion-row 要素のIDへサンプルからIDを書き換えます。
注意点
- 画像をタップで拡大するコードとスライダーのコードがうまく噛み合わない可能性がありますので、管理画面でOFFにしてください
- データベースのコレクションをスライダーにする際にはさらにCSS等を設定する必要があります。
- スライダーのカスタマイズ方法についてはSlickのドキュメントをご参照ください。
