Keen-Slider を使用したスライド(カルーセル)のサンプル。
可能な限りWebアクセシビリティにも配慮した実装にしています。
Sample Slider (Carousel) Implementation Using Keen-Slider.
Designed with an Emphasis on Web Accessibility.
Note
サンプルコードで使用しているバージョン (The version used in the sample code)
v6.8.6
- フェードイン / フェードアウトによるスライド(ループ再生)
- 自動再生
- ドットナビゲーション表示
- マウスオーバーによる一時停止
- 一時停止ボタン
- 横スクロール型スライド(ループ再生)
- 自動再生
- 一時停止ボタン
- 横スクロール型スライド(ループ)
- 手動
- ドットナビゲーション表示
- 左右矢印ナビゲーション表示
(3)を自動再生にして一時停止ボタンを設置したもの
- 横スクロール型スライド(ループ)
- 自動再生
- 一時停止ボタン
- ドットナビゲーション表示
- 左右矢印ナビゲーション表示