## 【Bubble Plugin Installation Guide (Step-by-Step)】
**Introduction:**
This guide provides basic instructions for implementing the "**Image Slider**" plugin in your Bubble application. Image Slider is a plugin that provides a UI element for automatically displaying multiple images in a slideshow format. (**Prerequisite: Logged into Bubble Editor**)
**Step 1: Prerequisites**
* This plugin requires no special preliminary setup. You can install and start using it right away.
**Step 2: Plugin Installation**
* Click "Plugins" in the left menu.
* Click the "+ Add plugins" button.
* Type "Image Slider" in the search box and locate the plugin.
* Click the "Install" button.
* Click "Done" after installation.
**Step 3: Adding the Element to Your Page**
* Select "Design" from the left menu and open the page where you want to use the plugin.
* Look for the "Image Slider" element in the "Visual Elements" section of the left element tree or element addition panel.
* Drag and drop the element to your desired position on the page.
**Step 4: Element/Plugin Property Configuration**
* Click on the placed Image Slider element to display the property editor.
* **Main Configuration Items:**
* `image_urls` (required): List of image URLs
* Set multiple image URLs in list format
* Example: Database repeater, static list, etc.
* `duration` (seconds): Set animation duration (interval between slides)
* `image_padding`: Space between images (default: 35px)
* `height`: Slider height (default: 240px)
* `width`: Slider width (default: 240px)
* `border_radius`: Corner radius (default: 0px)
* `animation_direction`: Animation direction (normal/reverse)
* `is_clickable`: Enable/disable image click functionality
* `urls_for_click`: List of destination URLs for clicks
* Used when `is_clickable` is enabled
* Must be set in list format in the same order as image URLs
* Example: Clicking the first image navigates to the first URL in the list
* `stop_hover`: Enable/disable animation pause on hover
**Configuration Examples:**
1. Basic Slideshow
* `image_urls`: List of image URLs (e.g., ['image1.jpg', 'image2.jpg', 'image3.jpg'])
* `duration`: 3 (changes every 3 seconds)
* Other settings at default values
2. Clickable Banner Slider
* `image_urls`: List of banner image URLs
* `is_clickable`: Yes
* `urls_for_click`: List of destination URLs for each banner (in same order as images)
* `stop_hover`: Yes (pauses on hover for better viewing)
**Step 5: Setting Element ID Attributes**
* This plugin does not require any special ID attribute settings.
**Step 6: Workflow Configuration**
* Open the "Workflow" tab in the left menu.
* The plugin provides the following actions and events:
* Actions:
* `start_animation`: Starts the slide animation
* `stop_animation`: Stops the slide animation
* `toggle_animation`: Toggles animation start/stop
* Events:
* `on_start_animation`: Triggered when animation starts
* `on_stop_animation`: Triggered when animation stops
**Step 7: Testing**
* Click the "Preview" button in the top right of the editor to open the application preview.
* Verify the following:
* All images are displaying correctly
* Slide animation is running at the intended speed
* If click functionality is enabled:
* Correct URL navigation for each image
* Link destination URLs match the image order
* If hover pause is enabled, animation stops correctly on mouse over
**Demo Check**
You can see a working example at the following URL:
https://demo-image-slider.bubbleapps.io/version-test**Important Notes:**
* Image URLs and destination URLs must be set in list format.
* When using click functionality, ensure the destination URL order matches the image order exactly.
* Animation starts automatically by default.
日本語
## 【Bubbleプラグイン導入手順テンプレート（Step-by-Stepガイド）】
**はじめに:**
このテンプレートは、Bubbleアプリケーションに新しいプラグイン「**Image Slider**」を導入するための基本的な手順を示します。Image Sliderは、複数の画像を自動的にスライドショー表示するUIエレメントを提供するプラグインです。（**前提：Bubbleエディターにログイン済み**）
**Step 1：事前設定**
* 本プラグインは特別な事前設定は不要です。すぐにインストールしてご利用いただけます。
**Step 2：プラグインのインストール**
* 左メニューの「Plugins」をクリックします。
* 「+ Add plugins」ボタンをクリックします。
* 検索欄に「Image Slider」と入力し、候補から該当するプラグインを見つけます。
* 「Install」ボタンをクリックしてインストールします。
* インストール後、「Done」をクリックします。
**Step 3：エレメントをページに追加する**
* 左メニューから「Design」を選び、プラグインの機能を利用したいページを開きます。
* 左側のエレメントツリーまたはエレメント追加パネルの「Visual Elements」セクションから、「Image Slider」エレメントを探します。
* エレメントをページ上の任意の位置にドラッグ＆ドロップで配置します。
**Step 4：エレメント/プラグインのプロパティ設定**
* 配置したImage Sliderエレメントをクリックし、表示されるプロパティエディターで設定を行います。
* **主な設定項目:**
* `image_urls` (必須): 表示する画像URLのリスト
* 複数の画像URLをリスト形式で設定します
* 例：データベースのリピーター、固定値のリストなど
* `duration` (秒): アニメーション時間を設定（スライド切り替えの間隔）
* `image_padding`: 画像間の余白（既定値: 35px）
* `height`: スライダーの高さ（既定値: 240px）
* `width`: スライダーの幅（既定値: 240px）
* `border_radius`: 角丸の半径（既定値: 0px）
* `animation_direction`: アニメーションの方向（normal/reverse）
* `is_clickable`: 画像クリック機能の有効/無効
* `urls_for_click`: クリック時の遷移先URLリスト
* `is_clickable`が有効な場合に使用
* 画像URLと同じ順序でリスト形式で設定する必要があります
* 例：1枚目の画像をクリックすると、リストの1番目のURLに遷移
* `stop_hover`: ホバー時のアニメーション停止機能の有効/無効
**設定例：**
1. 基本的なスライドショー
* `image_urls`: 画像URLのリスト（例：['image1.jpg', 'image2.jpg', 'image3.jpg']）
* `duration`: 3（3秒ごとに切り替え）
* その他はデフォルト値を使用
2. クリック可能なバナースライダー
* `image_urls`: バナー画像URLのリスト
* `is_clickable`: Yes
* `urls_for_click`: 各バナーのリンク先URLリスト（画像と同じ順序）
* `stop_hover`: Yes（ホバー時に一時停止して閲覧しやすく）
**Step 5：対象エレメントにID属性を設定する**
* 本プラグインでは、特別なID属性の設定は不要です。
**Step 6：ワークフローを設定する**
* 左メニューの「Workflow」タブを開きます。
* プラグインは以下のアクションとイベントを提供します：
* アクション：
* `start_animation`: スライドアニメーションを開始
* `stop_animation`: スライドアニメーションを停止
* `toggle_animation`: アニメーションの開始/停止を切り替え
* イベント：
* `on_start_animation`: アニメーション開始時に発火
* `on_stop_animation`: アニメーション停止時に発火
**Step 7：動作確認**
* エディター右上の「Preview」ボタンをクリックして、アプリケーションのプレビューを開きます。
* 以下の点を確認します：
* すべての画像が正しく表示されているか
* スライドアニメーションが意図した速度で動作しているか
* クリック機能を有効にした場合：
* 各画像に対応する正しいURLに遷移するか
* リンク先URLの順序が画像の順序と一致しているか
* ホバー停止機能を有効にした場合、マウスオーバー時に正しく停止するか
**デモの確認**
実際の動作例は以下のURLでご確認いただけます：
https://demo-image-slider.bubbleapps.io/version-test**重要な注意点：**
* 画像URLリストと遷移先URLリストは、必ずリスト形式で設定してください。
* クリック機能を使用する場合、画像URLと遷移先URLの順序を正確に対応させる必要があります。
* アニメーションは初期状態で自動的に開始されます。
Built on Bubble
