究極のreactjsイメージスライダーの巻第1フェーズ1

ReactJS画像スライダ-基礎を敷設。

これは、我々は携帯電話やデスクトップ用の完全応答画像スライダーを構築する2つのフェーズプロジェクトのフェーズ1です。

フェーズ2はもうすぐです。

閲覧私たちのティーチングコース。

我々はすべての要素を画面に置くことから始めます。

我々は2つのコンポーネント:デッキが必要です.JSとカード.js
7つの要素が動作します.
デッキの

.js

右ボタンを動かすボタン

は、左に動くためにボタンを押します
ビューポート(DIV)

イメージコンテナ( DIV )

私たちがユーザーがカルーセル(div)

をスクロールするのを許されているかどうか決定するために使うタッチ領域
カード内の

.js

イメージを保持するために使用する「カード」

実際のイメージ(IMG)

今、我々は画面上のすべてを中心にする必要があります。

絶対位置と変換の組み合わせを使用します.

すべてが中心である今、我々は左から右へカードを注文する必要があります。

我々は、デッキの中央のカードを決定し、その中央の左側に左にカードを移動するシンプルな機能を記述し、右側に中央にカードを右.

反応を議論しましょう。

カルーセルを敏感にするためには、パーセンテージとハードピクセル単位に基づいてビューポートをリサイズする必要があります.
それで、我々はちょうど50 %を選んで、ユーザーのブラウザーウインドウの幅に基づいて難しいピクセル数を計算します;次に、このコードをResizeウィンドウイベントリスナーで実行します.

window.addEventListener('resize', () => {
    img_width_as_percentage = 50;
    // img_width_as_percentage = window.innerWidth < 768 ? 100 : img_width_as_percentage;

    this.new_width =
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ?
            (img_width_as_percentage / 100) * window.screen.width :
            (img_width_as_percentage / 100) * window.innerWidth;

    this.view_port.style.width = `${this.new_width}px`;

    this.order_cards();
});

ブラウザサイズを変更するたびに、私たちのサイズ変更コードがあります.

我々は、我々の要素がレイアウトされて、行く準備ができています。

ソースファイルhereを取得できます.
次の段階では、タッチ、ボタン、および車輪のナビゲーションでこのことを移動を開始します.

あなたがより詳細なガイドを望むならば、YouTubeの上で私の完全なビデオチュートリアルをチェックしてください、...

ReactJSの第1段階で最終的なイメージスライダーをつくる方法