この投稿はWebflow社が提供する「Slider」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/slider
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
プロジェクトにスライダーを追加する方法について解説します。スライダーはサイトのUXを高めるための重要なパーツです。
スライダーを使用することで、スライドショー形式で、複数の画像、動画、テキストを見やすく表示することができます。
レッスン概要
スライダーはまっさらなメインキャンバスにドロップすると、横幅いっぱいに広がって配置されます。
また、スライダーは複数の要素があらかじめ組み合わさったパーツになっており、直接的な子要素を4つ持っています。
スライダーはデフォルトで2つのスライドを保持しています。
スライドを追加する方法は次の3つです。
スライドは次の 4 つの方法で移動できます。
スライダー設定のスライドメニューを使用して、特定のスライドに移動することもできます。
画像要素をスライドにドラッグできます。または、スライドに背景画像を追加して、そこにテキストなどのコンテンツを追加していくこともできます。
スライドにはディブブロックやセクションなどと同様に、様々な要素を入れることができます。スライダーをボディにドロップすると、スライドにはコンテナーを追加でき、コンテナーに見出しと段落を追加できます。
設定パネル (D) には、スライダーの動作を制御するための多くの設定があります。
アニメーション- スライド間を移動するときのスライドの外観を設定します。
イージング- スライド間でスライドが動作するときのイージングを変更します。
デュレーション- スライドが別のスライドに移るのにかかる時間を指定します。
スワイプジェスチャ- タッチデバイス(スマートフォンなど)でのスワイプしてスクロールできるかどうかを制御します。
自動再生- 最初のスライドが次のスライドに自動的に移るまでにかかる時間と、スライダーが最後までスライドしきるのに何枚分かを設定します。
最初と最後のスライドの矢印- 最初のスライドの左矢印と最後のスライドの右矢印をオン/オフにします。
スライドナビゲーションコントロール- ナビゲーション ボタンの間隔、形状、反転色を選択します。
スライダーをカスタマイズする一般的な方法をいくつか紹介します。
スライダーを選択し、スタイルパネルで高さを設定することで、スライダーのサイズを調整できます。これを行うと、カバーで設定されている背景画像のサイズは、それに応じて変更されることに注意してください。
スライダーの高さはピクセル単位でもビューポートの高さ(vh)でも設定できます。
幅を調整する必要がある場合は、スライダーを任意の幅を指定したブロックの中に入れることで調整できます。
デフォルトでは、スライダーで使用される矢印は垂直方向の中央に配置され、白い矢印アイコンのように見えます。これらのアイコンの外観は、次の手順に従って調整できます。
スライダーのカスタム矢印アイコンが必要な場合は、左矢印要素または右矢印要素内のアイコン要素を削除するだけOKです。独自の画像を左右の矢印要素にドラッグして、任意の矢印アイコンに変更できます。
矢印要素のディスプレイをフレックスにし、ジャスティファイをセンターにすることで、矢印を垂直方向中央に配置できます。
左右の矢印要素のホバー状態をスタイルするには、セレクタにホバーをセットして、不透明度を変更するか、フィルターを使用します。ホバーをセットした状態で背景画像を置き換えることで、ホバーした際に表示する矢印の画像を切り替えることもできます。
スライドナビゲーションドットのスタイル設定はもう少し複雑です。フォント サイズを変更することで、ドットサイズを変更できます。フォントの色を適用して、番号ラベルの色を変更できます。ただし、実際の点や四角の色を変更するには、カスタムコードにCSS を入力する必要があります。
したがって、ドットの色を変更する場合は、ページのカスタムコードに次のコードを追加します。
<style>
.w-slider-dot {
background: blue !important;
}
.w-slider-dot.w-active {
background: navy !important;
}
</style>
ドットを四角形に変更したい場合は、スライダー設定 → スライドナビゲーションセクションで丸みを帯びた設定をオフに切り替えることができます。
境界線やその他のプロパティを使用してカスタムシェイプを作成することもできます。
この例では、次のコードを貼り付けて、選択済み/アクティブ状態の空のドットを作成します。
<style>
.w-slider-dot {
background: #4353FF !important;
border: 3px solid #4353FF !important;
}
.w-slider-dot.w-active {
color: #4353FF !important;
background: none !important;
border: 3px solid #4353FF !important;
}
</style>
スライドの任意の部分を非表示にすることができます。その方法は次のとおりです。
スライダー要素をカルーセルスライダーにカスタマイズして、一度に複数のスライドを表示することもできます。一度に3つのスライドを表示するスライダーを作成する方法は次のとおりです。
スライドごとに異なる背景画像や色などデザインの差を付けたい場合は、設定している同じクラスについかして、各スライドに異なるコンボクラスを追加することで実現できます。
回避策として、各スライドにコレクションリストを追加します。次に、そのリストに表示されるアイテムの数を制限して、コレクションアイテムを1つだけ表示するようにします。
こうしたWebflowの制限を回避している例がMade in Webflowに掲載されている場合もありますので、そちらも参考にしてみてください。
例：https://webflow.com/made-in-webflow/website/Carousel-Slider-Collection
いかがでしょうか。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営