## 【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の順序を正確に対応させる必要があります。
* アニメーションは初期状態で自動的に開始されます。