webflow(ウェブフロー)スライダーの制限と制限回避方法

webflow標準のスライダーは簡単に使用できて便利ですが、細かいカスタマイズをしようと思うと面倒な仕様があるなと思ったのでまとめてみました。

スライダーの構成や基本的な使い方についてはスライダーをご参照ください。

webflowスライダーの仕様

webflowスライダーのDesigner画面から変更できない仕様を表にまとめました。

工夫することで変更できる仕様

上記表の中で丸がついているものは、ちょっと工夫することで変更できる仕様です。

ホバーしている間自動スクロールが止まる

ホバーしていると自動スクロールが止まってしまうため、透明な要素を上にかぶせることでホバーしていないようにさせます。

スライダーをwrapperで囲い、wrapperのpossitionをrerativeにする。そしてその中にスライダーの兄弟要素としてmaskを作成する。

 maskのcssを以下の通りにする。また、sliderの点々もcssを変更する。

なお、タブレット表示やスマホ表示のときはmaskのdisplayをnoneにしないとフリックで画像を変更できなくなる。

スライダーのドットの色の変更

webflowではなぜかドットの色の変更はDesigner画面から変更することができません。
カスタムコードで!importantを指定することで強制的にCSSを上書きします。

以下のコードをプロジェクトのHead Codeに記載してください。

そのほかカスタムコードで使用したスライダーのデザイン変更すはスライダー「高度なカスタマイズ」をご参照ください。

CMSコンテンツをスライダーに出力すると空白のスライダーが作成される

スライダーにCMSを突っ込んで表示 / 非表示を制御すると、表示されているスライドに
プラスで空白のスライダーが表示されてしまう。この現象を回避するには以下コードをプロジェクトの footer code に記入してください。

クローン可能なスライダー

いろいろと工夫してもwebflowのスライダーではデザイン要件を満たせない場合も結構あると思います。
その場合はwebflowユーザが作成したスライダーを活用する方法もあります。‍

クローン可能なスライダーからwebflowプロジェクトをクローンすることができます。
カスタマイズするにはプログラミングの知識が必要ですが、webflow標準のスライダーよりも柔軟にカスタマイズすることができます。