ORBIT SLIDER

このスライダーを動作させるには、ベースとして GSAP (GreenSock Animation Platform) と MotionPathPlugin が必要です。

1. 事前準備（共通）

   HTMLの </body> 直前などで、GSAP本体とプラグインを読み込んでください。

   
   <!-- GSAP 本体 & MotionPathPlugin -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MotionPathPlugin.min.js"></script>
           
   <!-- ORBIT SLIDERプラグイン -->
     <script src="https://cdn.jsdelivr.net/gh/molydebnum/orbit-slider@main/dist/orbitSlider.min.js"></script>

2. ジェネレーター または 手動セットアップ

   • パターン1：ジェネレーターで作成する

     視覚的に調整しながら実装したい場合に最適です。

     1. 1. ベースにしたいSVGパスをコピーして、本ページのジェネレーター内のSVGデータの入力欄に貼り付ける

        

        ※アイテムを添わせたいパスはSVGタグ内の一番上に置いてください。

     2. 2.プレビューを見ながらSVGデータの入力欄下の設定値を調整し、プレビューの下に書き出された HTML / CSS / JS を各ファイルへ貼り付ける。

   • パターン2：手動でコードを書く

     自由なタイミングで初期化したい場合や、動的に要素を制御したい場合に適しています。

     1. 1. HTML構造を作成する

        svgタグとpathタグ、アイテムのクラス名を合わせて作成してください。
        

        必須クラス

        • アイテムを添わせる道の親（svgタグ）：orbitRoad
        • アイテムを添わせる道（pathタグ）：orbitPath
        • アイテム（タグ自由）：orbit
        
        SVGの viewBox やpathの d 属性は作成したものに差し替えます。

        
        <div class="orbitSlider">
          <svg class="orbitRoad" viewBox="0 0 2669 933" xmlns="http://www.w3.org/2000/svg">
            <path class="orbitPath" d="..." />
          </svg>
          
          <div class="orbit">ITEM 1</div>
          <div class="orbit">ITEM 2</div>
          <div class="orbit">ITEM 3</div>
        </div>

        ※アイテムを添わせたいパスはSVGタグ内の一番上に置いてください。

     2. 2. JavaScriptで実行する（最小構成）

        デフォルト設定で良い場合は、これだけの記述で動作します。

        
        document.querySelectorAll(".orbitSlider").forEach((slider) => {
          createorbitSlider(slider);
        });

     3. 3. こだわりたい場合はオプションを追加

        第2引数にオブジェクトを渡すことで、挙動を自由にカスタマイズ可能です。
        オプション一覧

        
        document.querySelectorAll(".orbitSlider").forEach((slider) => {
          createorbitSlider(slider, {
            sliderHeight: "500px",    // 全体の高さ
            visibleCount: 4,          // 画面内の表示数
            autoSpeed: 30,            // 流れる速度
            direction: "right"        // 進行方向
          });
        });

3. レスポンシブ設定

   responsive オプションを使うことで、画面幅に合わせてスライダーの高さやアイテムのサイズを自動で最適化できます

   
   document.querySelectorAll(".orbitSlider").forEach((slider) => {
     createorbitSlider(slider, {
     // ...基本設定（STEP 2を参照）
       responsive: {
         // 768px以下の時の設定
         768: {
           sliderHeight: "65vw",
           orbitItemWidth: "35%",
           //...全てのオプションがいれられます
         },
         // 480px以下の時の設定
         480: {
           sliderHeight: "80vw",
           orbitItemWidth: "45%",
           //...全てのオプションがいれられます
         }
       }
     })
   });

   • ブレイクポイント: 赤文字の箇所に書いた数字が「画面の横幅（px）」を表しています。画面がその数字よりも小さくなった時に、{}の中の設定が適用されます。
   • 自由な設定: 設定したい画面幅の数だけ、項目を増やすことができます。
   • 自動調整: 画面のサイズを変えるたびにプラグインが自動で計算し直すので、スマホの縦横切り替えにも対応しています。

4. 🚨うまく表示・動作しない時は？🚨

   • SVGタグの属性を確認

     自作のSVGを使うときは、svgタグの属性として 【xmlns="http://www.w3.org/2000/svg"】 が書かれているか確認してください。これがないと、JavaScriptから正しく認識されません。 もし書かれていない場合は足してみてください。

   • パスの形状

     本プラグインは、始点から終点へ移動する 「オープンパス」専用 です。円や多角形などの閉じられたパス（クローズドパス）では正しく動作しない場合があるため、必ず線が閉じられていないパスを使用してください。