keen-slider-code-examples

Keen-Slider を使用したスライド（カルーセル）のサンプル。
可能な限りWebアクセシビリティにも配慮した実装にしています。

Sample Slider (Carousel) Implementation Using Keen-Slider.
Designed with an Emphasis on Web Accessibility.

• Keen-Slider

Note

サンプルコードで使用しているバージョン (The version used in the sample code)
v6.8.6

1. Fader_AutoSwitch_Dots_and_Pause_Button

• フェードイン / フェードアウトによるスライド（ループ再生）
• 自動再生
• ドットナビゲーション表示
• マウスオーバーによる一時停止
• 一時停止ボタン

Demo & Code

• Demo
• Code

2. Animation_AutoMove_with_Pause_Button

• 横スクロール型スライド（ループ再生）
• 自動再生
• 一時停止ボタン

Demo & Code

• Demo
• Code

3. Arrows_and_Dots_Nav

• 横スクロール型スライド（ループ）
• 手動
• ドットナビゲーション表示
• 左右矢印ナビゲーション表示

Demo & Code

• Demo
• Code

4. Arrows_and_Dots_Nav_AutoSwitch

（3）を自動再生にして一時停止ボタンを設置したもの

• 横スクロール型スライド（ループ）
• 自動再生
• 一時停止ボタン
• ドットナビゲーション表示
• 左右矢印ナビゲーション表示

Demo & Code

• Demo
• Code