2018.02.21 2019.03.27

スライダーの実装するなら〜 Flickity

これからスライダーの主流になりそうなFlickityを利用してスライダーの実装を試してみます。

Javascript

フロントエンド

[ 目次 ]

はじめに
プロジェクトディレクトリの作成
flickityや必要となるライブラリのインストール
各ファイルを作成
parcelから起動

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

この記事は過去に運用していたブログからの移行記事になります。

今回はFlickityというライブラリを利用して、スライダーのサンプルを作成してみたいと思います。

https://flickity.metafizzy.co/

私は実際にFlickityをサービスで利用しています。
スマホなどのタッチデバイスにも対応してます。今後も利用者が増えそうですね。

【前提条件として】

npmを利用してフロントエンドのモジュールを管理
parcelを利用してbuildとサーバー起動を行う

プロジェクトディレクトリの作成

$ mkdir -p sample-flickity
$ cd sample-flickity

flickityや必要となるライブラリのインストール

■ parcelをインストール

$ npm install -g parcel-bundler

■ buildに必要なライブラリをインストール

$ npm init
$ npm install babel-preset-env -D
$ npm install node-sass -D

■ babelの設定ファイルを作成

$ touch .babelrc

# .babelrc
{
  "presets": [
    "env"
   ]
}

■ flickityをインストール

$ npm install flickity

これで準備は完了です。

各ファイルを作成

$ mkdir -p {src,public}
$ mkdir -p src/{js,scss,images}
$ touch src/index.html
$ touch src/js/app.js
$ touch src/scss/style.scss

■ エントリーポイントとなるsrc/index.html

<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Flickity Sample</title>
</head>
<body>

    <h1>Flickity - wrapAround</h1>

    <div class="main-carousel-wrapAround">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
    </div>

    <h1>Flickity - freeScroll</h1>

    <!-- Flickity HTML init -->
    <div class="main-carousel-freeScroll">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
    </div>

    <script src="js/app.js"></script>
</body>
</html>

■ src/js/app.js

import '../scss/style.scss';
import Flickity from 'flickity';

new Flickity(document.querySelector('.main-carousel-wrapAround'), {
    "wrapAround": true
});
new Flickity(document.querySelector('.main-carousel-freeScroll'), {
    "freeScroll": true
});

■ src/scss/style.scss

@import "../../node_modules/flickity/dist/flickity.min";

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}