Javascript

【Javascript】フレキシボックスとJavaScriptによって構築されたスライダー。flexider

July 1, 2016
flexider

flexiderはレスポンシブ対応で、JavaScriptで構築された軽量のスライダーです。タッチ+キーボードのサポートも付属しています。

Include files

<link rel="stylesheet" href=".../flexider.css"/>
<script src=".../flexider.js"> </script>

Markup

    <div class="flexider" data-fx-mode="auto" data-fx-delay="3">
       <div class="slide-con">
    
          <div class="slide">
              //slide 1 stuff here
          </div>
    
          <div class="slide">
              //slide 2 stuff here
          </div>
    
         //other slides
    
       </div>
   </div>

Customizing Flexider

Mode

<div class="flexider" data-fx-mode="auto || manual">

Delay b/w auto-moves

        <div class="flexider" data-fx-mode="auto" data-fx-mode="3">
        //data-fx-mode takes time in seconds

Demo/Download