ノーコードで有名なBubble。
登録したけどどうすればいいのか分からない。何から始めていいのか分からない。
そんな時は、まずレッスンチュートリアルから始めるのがいいです。
ここではレッスンチュートリアルの「Building a slideshow」について書いています。
画像のスライドショー
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_211127568.jpg)
Building a slideshowは、画像のスライドショーを作成することができます。
Create a beautiful picture slideshowとあるように、美しい写真のスライドショーを作成可能。
時間は、2 minutes(2分)になっていましたので、比較的簡単に行えます。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m27d_114620407.jpg)
スタートをクリックして、チュートリアルを始めていきます。
矢印に従い、画面の左側のPluginsをクリック。
add pluginsでプラグインを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_211731911.jpg)
プラグインを探します。
いくつかのプラグインが表示されるので、スクロールして指定のプラグインを探します。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_212035910.jpg)
プラグインの中から「Slick Slideshow」を選択しインストールします。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_212209954.jpg)
青いDONE(完了)ボタンをクリック
次に、左上のデザインをクリック
Slidshowをクリックして枠を作ります。
大きめのエリアを指定して、表示エリアを設定。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_212526233.jpg)
upload another imageをクリックして、アップロードします。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_212659877.jpg)
画像をアップロードするので、画像が必要になります。
PC内の画像やurlからのアップロードも可能です。
PC内の画像を2枚アップロードしました。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_212952274.jpg)
slide(スライド)をFadeにします。
NoneをSlideにして、width(幅)を10にしました。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_213103932.jpg)
枠内に画像が表示されます。
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_213440522.jpg)
背景のカラーを変更できます。
今回は、水色を選んでみました。
最後に、右上のプレビューをクリック
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_213447963.jpg)
プレビューで表示されたのがこちら
![](https://hikari-sedori.com/wp-content/uploads/2020/08/2020y08m28d_213514464.jpg)
自動で画像が変わり、このようなスライドショーを作ることができました。
こちらのレッスンは比較的簡単に行えますが、画像を用意しておく必要があります。
動画はこちら
今回は、画像のスライドショーのレッスンを紹介しました。
その他のBubbleレッスンはこちら
⇒ グラフ要素の使用
コメントを残す