Webコンポーネントのアイデア:カルーセルを構築する

Carouselは一連の画像を表示するための有用なコンポーネントです.人々はしばしば棚からカルーセルを使用しますが、彼らはあなた自身を構築するために非常に簡単です!このポストでは、私はカルーセルのためにウェブ構成要素を構築するつもりです.

次の前のボタンをクリックすると、画像のシリーズをスクロールしてここで見ることができます.

存在しない要素の構築
Webコンポーネントは、HTMLの一般的なパターンを抽象化するための便利なツールです.Web上で一般的ですが、独自の要素を持っていないユーザーインターフェイスパターンがたくさんあります.代わりに、他の要素から自分自身をビルドする必要があります.
あなた自身がHTMLを繰り返し、または複雑さがあまりにも多くを取得見つける場合は、複雑さを抽象的にすることができます.Webコンポーネントを作成することにより、再利用可能になり、理解しやすくなるきちんとした抽象化を作成できます.プラスそれはあなたのHTMLをはるかにtidierになります!

HTMLはどんな感じですか?
このWebコンポーネントはかなり簡単ですが、それは任意の属性を持っていない-あなただけの中にいくつかの要素を置く.

<ben-carousel>
  <img src="http://placekitten.com/360/200">
  <img src="http://placekitten.com/300/200">
  <img src="http://placekitten.com/420/200">
</ben-carousel>

ここでのアイデアは、できるだけ標準的な要素に固執し、それをシンプルに保つことです.カルーセルはカルーセルのような内容を表示することになります.その後、コンテンツ自体は何でもすることができます!この場合、私は異なるサイズで猫の3つのイメージを入れました.
このアプローチの大きな利点は、Webコンポーネントを使用して、私は私のカルーセルの中に任意のHTMLコンテンツを置くことができることです.それはちょうどHTMLです!プラス私はどんなウェブサイトでも、ライブラリを使用することができます.標準に固執することは、しばしばものをより簡単にします.

テンプレートの作成
まず、このカルーセルを作るために必要な要素を書き留めた.

<template id="ben-carousel">
  <button>Prev</button>
  <slot></slot>
  <button>Next</button>
</template>

私は2つのボタンを持っていることをここで見ることができる、左に行くための1つと右に行くため.それから私はslot 要素イン、これは内部の内容が行くところです.しかし、それはそれがカルーセルのように見えるのに十分でありません.たった今、これは次のようになります.

だから、スタイリングを追加する必要があります.カルーセルのように見えたら、カルーセルのように動くことができます.
以下にスタイルを示します.

<template id="ben-carousel">
  <style>
    :host {
      display: block;
    }

    #container {
      display: flex;
    }

    #images {
      display: flex;
      flex-shrink: 1;
      overflow: scroll;
    }
  </style>
  <div id="container">
    <button id="prev">Prev</button>
    <div id="images">
      <slot></slot>
    </div>
    <button id="next">Next</button>
  </div>
</template>

最初に追加した余分な要素を見てみましょう.私はdiv 他のすべての要素をラップするには、レイアウトに便利です.それから私は別のdiv 画像の場合、これはそれらのどれだけ表示されるかを制御するのに役立ちます.
また、私はすべての要素を与えているid . Webコンポーネントを使用している場合は、HTMLとCSSはすべてコンポーネント内にスコープされます.それで、あなたはid あなたが望む限り、それはあなたのページの他の人と重複しません.これによりJavaScriptとCSSを書くことが非常に簡単になります.
ここでスタイルを見てみましょう.最初の部分は、要素がaとして表示されるようにしますblock 要素

:host {
  display: block;
}

次に、私は使用する外側容器をスタイリングしましたdisplay: flex :

#container {
  display: flex;
}

これは、3つの子要素(#prev , #images , and #next ) すべてのディスプレイの横に横たわる.これは、レイアウト全体のキーです!
最後に私たちは#images コンテナ.ここではflex-shrink: 1 そうする#images 親の幅が制約された場合、コンテナは縮小します.

#images {
  flex-shrink: 1;
  display: flex;
  overflow: scroll;
}

私はまたdisplay: flex ここで子供たちを作る#images コンテナ(画像)すべての行のeachotherの横に表示されます.最後にoverflow: scroll と言う#images 内容がオーバーフローした場合、コンテナはスクロールバーを作成します.
結果は次のようになります.

それはすべてについてです!我々が持っていない唯一の部分はボタンです.

ボタンの配線
ボタンを配線するにはJavaScriptを書く必要があります.最初に、カルーセル要素を作成するためのいくつかのボイラープレートを設定します.

class CarouselElement extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({mode: 'open'});
    const template = document.getElementById('carousel');
    const clone = template.content.cloneNode(true);
    this.shadowRoot.appendChild(clone);
  }
}

customElements.define('ben-carousel', CarouselElement);

今、我々はイベントを配線したい.我々はすでに我々の要素のそれぞれを与えているのでid これはかなり簡単です.最初に、我々は我々が必要とする要素の各々を得ますshadowRoot :

// ... inside the constructor

const images = this.shadowRoot.getElementById('images');
const prev = this.shadowRoot.getElementById('prev');
const next = this.shadowRoot.getElementById('next');

次に、イメージコンテナをスクロールするクリックハンドラを設定します.

// ... inside the constructor

prev.addEventListener('click', () => {
  images.scrollLeft -= 100;
})

nextButton.addEventListener('click', () => {
  images.scrollLeft += 100;
})

そして、ビンゴBango我々は、スクロールカルーセルを持っています!

ウェブコンポーネントに興味がある?
話していますPractical Uses for Web Components アットWeb Directions: Code 2017年9月17日・24日.興味がある場合は、バウチャーを使用することができますbensentme 20 %オフになる!