JavaScriptナビゲーションで強化された超柔軟なCSSカルーセル

多数のアイテムを簡単に処理し、スムーズなスクロールを提供し、動的ボタンナビゲーションを提供する多用途のカルーセルコンポーネントを構築することは、一般的な課題です。このチュートリアルは、ReactとCSSを使用してまさにそのようなコンポーネントを作成することをガイドします。

私たちの目標は、スムーズな移行と直感的なナビゲーションを備えたレスポンシブカルーセルです。 JavaScript、React、およびDom APIを活用します。

プロジェクトのセットアップ

新しいReactアプリケーションを作成し、 styled-componentsをインストールすることから始めましょう。

 NPX Create-React-App React-Easy-Carousel
CD React-Eaty-Carousel
糸はスタイルのコンポーネントを追加します
糸インストール
糸のスタート

スタイリングを簡素化するために、事前に定義されたスタイルのコンポーネントを使用します。

 // app.styled.js
「スタイルのコンポーネント」からスタイルのインポート。

const h1 = styled（ 'h1'） `
  テキストアライグ：センター;
  マージン：0;
  パディングボトム：10rem;
`;

const const relative = styled（ 'div'） `
  位置：相対;
`;

const flex = styled（ 'div'） `
  ディスプレイ：Flex;
`;

const const horizo​​ntalcenter = styled（flex） `
  justify-content：center;
  マージン左：自動;
  マージン右：自動;
  最大幅：25rem;
`;

const container = styled（ 'div'） `
  高さ：100VH;
  幅：100％;
  背景：＃ecf0f1;
`;

const item = styled（ 'div'） `
  色：白;
  フォントサイズ：2REM;
  テキストトランスフォーム：大文字;
  width：$ {（{size}）=> `$ {size} rem`};
  高さ：$ {（{size}）=> `$ {size} rem`};
  ディスプレイ：Flex;
  Align-Items：Center;
  justify-content：center;
`;

次に、 App.jsコンポーネントを構成します。

 // app.js
'./Carousel'から{Carousel}をインポートします。

function app（）{
  戻る （
    <container>
      <h1 id="簡単なカルーセル">簡単なカルーセル</h1>
      <horizontalcenter>
        <carousel>
          {/ *カルーセルアイテムはここに行きます */}
        </carousel>
      </horizontalcenter>
    </container>
  ）;
}

デフォルトアプリをエクスポートします。

カルーセルコンポーネントの構築

Carouselコンポーネントはメインを利用します<div>容器と内側のスクロール可能な領域。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> // carousel.js // ...（インポートステートメントとスタイルのコンポーネントが後で追加されます） const carousel =（{children}）=&gt; { // ...（JSXとロジックが後で追加されます） }; デフォルトのカルーセルをエクスポートします。</pre><div class="contentsignin">ログイン後にコピー</div></div> <h4 id="CSSベースの滑らかなスクロール"> CSSベースの滑らかなスクロール</h4> <p>滑らかな遷移のためにCSSスクロールスナップを使用し、スクロールバーを非表示にします。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> // carousel.styled.js 「スタイルのコンポーネント」からスタイルのインポート。 './app.styled'から{flex}をインポートします。 const carseLcontainer = styled（ 'div'） ``; //後でスタイリングを追加します const canst carouselcontainerinner = styled（flex） ` オーバーフローX：スクロール; Scroll-Snap-Type：X Tangatory; -ms-overflowスタイル：なし; / * ieおよびedge */ Scrollbar-Width：なし; / * firefox */ ＆:: -webkit-scrollbar { 表示：なし; / * Chrome、Safari、Opera */ } ＆&gt; * { Scroll-Snap-align：center; } `; // ...（他のスタイルのコンポーネントが後で追加されます）</pre><div class="contentsignin">ログイン後にコピー</div></div> <p> <code>scroll-snap-typeとscroll-snap-alignスムーズなスクロールとアイテムのセンタリングを確保します。

いくつかのサンプル項目を作成しましょう。

 // app.js
const colors = ['＃f1c40f'、 '＃f39c12'、 '＃e74c3c'、 '＃16a085'、 '＃2980b9'、 '＃8e44ad'、 '＃2c3e50'、 '＃95a5a6'];
const ColorsArray = colors.map（color =>（
  <item key="{color}" size="{20}" style="{{" background: color>
    {色}
  </item>
））;

そして、それらをカルーセルに追加します：

 // app.js
<carousel>{ColorsArray}</carousel>

より良い視覚的魅力を得るために、 Carousel.styled.jsの間隔とマージンを追加します。

ナビゲーションボタン

カルーセルを強化するために、ナビゲーションボタンを追加します。単純なSVG矢印を使用します。

 // arrow.js
const arrowleft =（{size = 30、color = '＃000000'}）=>（
  <svg fill="none" height="{size}" stroke="{color}" strokelinecap="round" strokelinejoin="round" strokewidth="2" viewbox="0 0 24 24" width="{size}" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 12H6M12 5l-7 7 7 7"></path>
  </svg>
）;

const arrowrightをエクスポート=（{size = 30、color = '＃000000'}）=>（
  <svg fill="none" height="{size}" stroke="{color}" strokelinecap="round" strokelinejoin="round" strokewidth="2" viewbox="0 0 24 24" width="{size}" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 12h13M12 5l7 7-7 7"></path>
  </svg>
）;

実装の残りの部分（ usePositionフック、ダイナミックボタンの可視性、アクセシビリティの改善を含む）は、元のコードと同様の構造に従いますが、明確さと組織が向上します。長さの制約のため、ここで残りのコード全体を再現することはできません。ただし、提供された構造と説明により、元のコードに基づいて残りの機能を効果的に実装できるようにする必要があります。パフォーマンスの最適化のためにuseCallbackフックを組み込み、使用可能なアイテムに基づいてボタンの可視性を更新するために、 usePosition内のスクロールロジックを処理することを忘れないでください。最後に、アクセシビリティに適切なARIA属性を追加します。

以上がJavaScriptナビゲーションで強化された超柔軟なCSSカルーセルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。