【Bubble】スライドショーを作る方法！Wonderful Image Slider

ノーコードツールBubbleでプラグイン「Wonderful Image Slider」を使い、スライドショーを作る方法をご紹介！

Data Typeの作成からWonderful Image Sliderの設定まで、すべて画像つきで解説します。

Bubbleでシンプルなスライダーを実装してみたい方はぜひ参考にしてみてくださいませ。よろしくどうぞ。

動画解説バージョンはこちら！

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

EPICs株式会社の特徴

実装イメージ

こんな感じの超絶シンプルなスライドショーをプラグイン「Wonderful Image Slider」を使ってサクッと作ります。

以下の手順でスライドショーを実装します。

まずはスライドショー用の画像を格納するData Typeを作ります。

スクロールできます

設定項目	設定内容
Type name	slideshowImage
▼Create a new filedで以下を作成▼
Field name	image
Field type	image（BASIC TYPESの方）
This field is a list（multiple entries）	チェックを入れる

App dataのNew entryをクリックします。

下の画像のように表示されていれば画像のアップロード成功です。

プラグイン追加ページでWonderful Image Sliderを検索してインストールします。

プラグインのインストールに成功すると、Visual Elements欄にWonderful Image Sliderのelementが追加されます。

そちらをクリックしてページに設置しましょう。中央寄せにするのがおすすめ。

Wonderful Image SliderエレメントのAppearanceのImage Listを以下のように設定します。

スクロールできます

設定項目	設定内容
Image List	Search for slideshowImages:each items’s image

slideshowImageは最初にスライドショー用に作ったData typeです。おしまい。

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！