Keen-Slider使ってみた

Keen-Sliderというカルーセル用パッケージがいい感じだったので紹介します

Keen-Sliderの何が優れているの？

  1. 超軽い
  2. 依存ライブラリがない
  3. typescriptのサポート
  4. React、Vue、Angularをサポート
  5. 簡単

(参考記事)ics.media

使い方

前準備

  1. package.jsonのインストール package.jsonを以下のように変更
{
  "name": "carousel",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack build --mode production"
  },
  "dependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "css-loader": "^6.7.3",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "keen-slider": "^6.8.5",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

npm install
  1. webpack.config.js webpack.config.jsを以下のように変更
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader",
            },
            {
                test: /\.(scss|sass|css)$/i,
                use: [ 'style-loader', 'css-loader', 'sass-loader' ],
            },
            {
                test: /\.html$/,
                loader: "html-loader"
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    devServer: {
        static: {
            directory: "./dist",
        },
    },
};
  1. index.html htmlを以下のように変更
<!DOCTYPE html>
<html>
<head>
    <title>Keen-Slider</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
<div id="my-keen-slider" class="keen-slider">
    <div class="keen-slider__slide number-slide1">1</div>
    <div class="keen-slider__slide number-slide2">2</div>
    <div class="keen-slider__slide number-slide3">3</div>
    <div class="keen-slider__slide number-slide4">4</div>
    <div class="keen-slider__slide number-slide5">5</div>
    <div class="keen-slider__slide number-slide6">6</div>
</div>
</body>
</html>
  1. style.css style.cssを以下のように変更
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class^="number-slide"],
[class*=" number-slide"] {
  background: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #fff;
  font-weight: 500;
  height: 300px;
  max-height: 100vh;
}

.number-slide1 {
  background: rgb(64, 175, 255);
  background: linear-gradient(
          128deg,
          rgba(64, 175, 255, 1) 0%,
          rgba(63, 97, 255, 1) 100%
  );
}

.number-slide2 {
  background: rgb(255, 75, 64);
  background: linear-gradient(
          128deg,
          rgba(255, 154, 63, 1) 0%,
          rgba(255, 75, 64, 1) 100%
  );
}

.number-slide3 {
  background: rgb(182, 255, 64);
  background: linear-gradient(
          128deg,
          rgba(182, 255, 64, 1) 0%,
          rgba(63, 255, 71, 1) 100%
  );
  background: linear-gradient(
          128deg,
          rgba(189, 255, 83, 1) 0%,
          rgba(43, 250, 82, 1) 100%
  );
}

.number-slide4 {
  background: rgb(64, 255, 242);
  background: linear-gradient(
          128deg,
          rgba(64, 255, 242, 1) 0%,
          rgba(63, 188, 255, 1) 100%
  );
}

.number-slide5 {
  background: rgb(255, 64, 156);
  background: linear-gradient(
          128deg,
          rgba(255, 64, 156, 1) 0%,
          rgba(255, 63, 63, 1) 100%
  );
}
.number-slide6 {
  background: rgb(64, 76, 255);
  background: linear-gradient(
          128deg,
          rgba(64, 76, 255, 1) 0%,
          rgba(174, 63, 255, 1) 100%
  );
}

実践

  1. 1番シンプルなカルーセル

index.jsを以下のように変更

import './style.css';
import 'keen-slider/keen-slider.scss'
import KeenSlider from 'keen-slider'

const slider = new KeenSlider("#my-keen-slider");

const slider = new KeenSlider("#my-keen-slider");

実質jsのコードはこれだけで済むのでもうめちゃくちゃ簡単です。

他にもプラグインを使ったサンプルなんかも公式に色々あるので使ってみてください

(参考)Examples | Keen-Slider