https://github.com/burnworks/keen-slider-code-examples

Keen-Slider code examples
https://github.com/burnworks/keen-slider-code-examples

keen-slider

Last synced: about 1 month ago
JSON representation

Keen-Slider code examples

• Host: GitHub
• URL: https://github.com/burnworks/keen-slider-code-examples
• Owner: burnworks
• License: mit
• Created: 2023-11-30T13:10:30.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-19T04:58:24.000Z (10 months ago)
• Last Synced: 2024-02-19T05:41:12.088Z (10 months ago)
• Topics: keen-slider
• Homepage:
• Size: 94.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# keen-slider-code-examples

Keen-Slider を使用したスライド（カルーセル）のサンプル。  

可能な限りWebアクセシビリティにも配慮した実装にしています。

Sample Slider (Carousel) Implementation Using Keen-Slider.  

Designed with an Emphasis on Web Accessibility.

- [Keen-Slider](https://keen-slider.io/)

> [!NOTE]

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

> v6.8.6

## 1. Fader_AutoSwitch_Dots_and_Pause_Button

- フェードイン / フェードアウトによるスライド（ループ再生）

- 自動再生

- ドットナビゲーション表示

- マウスオーバーによる一時停止

- 一時停止ボタン

### Demo & Code

- [Demo](https://burnworks.github.io/keen-slider-code-examples/Fader_AutoSwitch_Dots_and_Pause_Button/)

- [Code](./docs/Fader_AutoSwitch_Dots_and_Pause_Button)

## 2. Animation_AutoMove_with_Pause_Button

- 横スクロール型スライド（ループ再生）

- 自動再生

- 一時停止ボタン

### Demo & Code

- [Demo](https://burnworks.github.io/keen-slider-code-examples/Animation_AutoMove_with_Pause_Button/)

- [Code](./docs/Animation_AutoMove_with_Pause_Button)

## 3. Arrows_and_Dots_Nav

- 横スクロール型スライド（ループ）

- 手動

- ドットナビゲーション表示

- 左右矢印ナビゲーション表示

### Demo & Code

- [Demo](https://burnworks.github.io/keen-slider-code-examples/Arrows_and_Dots_Nav/)

- [Code](./docs/Arrows_and_Dots_Nav)

## 4. Arrows_and_Dots_Nav_AutoSwitch

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

- 横スクロール型スライド（ループ）

- 自動再生

- 一時停止ボタン

- ドットナビゲーション表示

- 左右矢印ナビゲーション表示

### Demo & Code

- [Demo](https://burnworks.github.io/keen-slider-code-examples/Arrows_and_Dots_Nav_AutoSwitch/)

- [Code](./docs/Arrows_and_Dots_Nav_AutoSwitch)