携帯端末＆PC VUE-簡潔なスライダエンドカルーセルアセンブリ

VUE-簡潔-スライダー、シンプルなスライドアセンブリの構成が簡単で、適応/フルスクリーン+ +ページングボタン、携帯端末とPC適合末端をサポートしています

 

 

 

 

 

 

 

 

 

機能

• シンプルな設定
• 軽量（〜35KB gzipされました）
• 様々なスライドスタイル

達成されました

•  フルスクリーンの適応
•  互換性のあるモバイルエンド
•  垂直スクロール
•  自動切り替えのタイミング
•  可変幅ローリング
•  スクロールシームレスループ
•  マルチレベルのスクロール
•  グラデーションローリング
•  回転スクロール
•  カスタムコンポーネントのページを追加
•  スロットを使用して代替ページ
•  カスタムのページング
•  スライディングセンター
•  新しいカバーフロー
•  レベルのネストされたスライダー

未来が実現します

•  仮想スライダー

インストール

npm install vue-concise-slider --save

使い方

< テンプレート> 
<！ - フレームワークパッケージのスライダーをプロデュース- > 
 < divのスタイル= "幅：70％;マージン：オート20ピクセル、高さ400ピクセル" > 
      <！ - コンフィギュレーション・スライダアセンブリ- > 
      < スライダー：ページ= "ページ" ：sliderinit = "sliderinit" @slide = 'スライド' @tap = 'ONTAPの' @Init = 'のOnInit' > 
          <！ - セット搭載、カスタマイズ- > 
          < divのスロット= "読み込み" >ロード... </ DIV > 
      </ スライダー> 
 </ DIV >
</ テンプレート> 
< スクリプト> 
からの輸入スライダー' VUE-簡潔なスライダ' // インポートスライダーコンポーネント
のエクスポートデフォルト{ 
   エル：' #app ' 、
   データ（）{ 
      リターン{
         // 画像一覧
        ページ：[ 
          { 
          HTML：" < divクラス= "slider1"> slider1 </ div> ' 
          スタイル：{ ' 背景' ：' ＃1 1bbc9b "
            } 
          }、
            
          { 
            HTML：' <DIV CLASS = "スライダ2">スライダ2 </ div> ' 、
            スタイル：{ 
              ' 背景' ：' ＃1 4bbfc3 ' 
            } 
          }、
          { 
            HTML：' <DIV CLASS = "slider3"> slider3 </ div> ' 
            スタイル：{ ' 背景' ：' ＃1 7baabe ' 
            } 
          } 
        ] // スライディング構成[OBJ]         sliderinit。{ 
          currentPageに：0
              
        
、
          thresholdDistance：500 、
          thresholdTime：100 、
          自動再生：1000年、
          ループ：真、
          方向：' 垂直' 、
          無限：1 、
          slidesToScroll：1 、
          たtimingFunction：' 容易' 、
          持続時間：300 
        } 
      } 
    }、
    コンポーネント：{ 
        スライダー
    } 
    方法：{ 
      //リスナーイベント
      スライド（データ）{ 
        にconsole.log（データ）
      }、
      ONTAP（データ）{ 
        にconsole.log（データ）
      } 
      のOnInit（データ）{ 
        にconsole.log（データ）
      } 
    } 
} 
</ スクリプト>

 

関連

1.  pagination: true, // 底部小圆点是否隐藏（true显示，false隐藏） 2. currentPage: 0, // 当前页码 3. thresholdDistance:500, // 滑动判定距离 4. thresholdTime:100, // 滑动判定时间 5. autoplay:2000, // 自动滚动[ms] 6. loop:true, // 是否循环滚动 7. direction:'vertical', // 滚动方向 8. infinite:1, // 无限滚动前后遍历数 9. slidesToScroll:1, // 滚动行数

Demo地址 https://warpcgd.github.io/vue-concise-slider/demos/

ドキュメントは対処 https://warpcgd.github.io/vue-concise-slider/docs.html