畫像スライダー（カルーセルとも呼ばれます）はどこでも入手できます。寫真が左から右にスライドする（またはその逆）、一般的なスライダーを作成するための多くのCSSトリックがあります。多くのJavaScriptライブラリも、複雑なアニメーションを備えた美しいスライダーを作成します。この記事では、これらのことは何もしません。

一連の記事を通して、いくつかの派手で珍しい純粋なCSSスライダーを探ります。同じクラシックスライダーを見るのにうんざりしているなら、あなたは正しい場所にいます！

CSSスライダーシリーズ

• サイクル回転ピクチャースライダー（現(xiàn)在の位置）
• ポラロイドの寫真を閲覧します
• 無限3Dスライダー

最初の投稿では、「ループ回転畫像スライダー」と呼ばれるものから始めます：

かっこいいですよね？コードを分析しましょう！

html構(gòu)造

美しい寫真の裝飾やCSSグリッドとカスタムシェイプに関する私のシリーズに従った場合、私の最初のルールはできるだけ少ないHTMLを使用することであることがわかります。私は常にCSSソリューションを見つけるのに苦労し、その後、多くの<div>などでコードを臺無しにします。ここにも同じルールが適用されます - 私たちのコードは、コンテナ內(nèi)の一連の畫像にすぎません。 <p> 4つの寫真を使用していると仮定します：</p> <pre class="brush:php;toolbar:false">&lt;div&gt; &lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt; &lt;/div&gt;</pre> <p>それだけです！それでは、コードの興味深い部分に入りましょう。しかし、最初に、スライダーがどのように機能するかの論理を理解するために掘り下げます。 </p> <h3 id="稼働方法は">稼働方法は？ </h3> これはビデオであり、そこから畫像がどのように動くかをよりよく理解できるように<p> cssを削除しました：（ここにビデオを埋め込む必要がありますが、ビデオを処理できないので、テキストで説明します）ビデオは4つの畫像を大きな円の上で反時計回りに回転させます。すべての畫像は同じサイズです（図のSで表されます）。すべての畫像の中心と交差し、半徑（R）を持つ円である青い円に注意してください。後でアニメーションにこの値が必要になります。 rは0.707 * S.に等しい（方程式を考慮して、幾何學(xué)的な計算をスキップします。）<code>overflow: hidden

いくつかのCSSを書きましょう！

CSSグリッドを使用して、すべての畫像を互いに同じ領(lǐng)域に配置します。

これまでのところ、複雑すぎるものはありません。トリッキーな部分はアニメーションです。

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我們稍后將看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

大きな円の回転について議論しましたが、実際には、各畫像を個別に回転させて、大きな回転円の錯覚を作成します。それでは、アニメーションを定義し、畫像要素に適用しましょう。

主なトリックは、行を強調(diào)表示することです。デフォルトでは、CSS mプロパティはセンター（または50％50％）に等しく、畫像が中心を回転しますが、そうする必要はありません。畫像が含まれている

大きな円の中心を回転させるために畫像が必要です。

.gallery > img {
  /* 與之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

Rは0.707 * sに等しいため、

sは、rが畫像サイズの70.7％に等しいと言えます。 120.7％の値を取得する方法を説明するグラフは次のとおりです。（畫像はここに埋め込む必要がありますが、畫像を処理できないため、テキストで説明します）畫像は、変換オリジン値を計算する幾何學(xué)的関係を示しています。

アニメーションを?qū)g行して、何が起こるかを見てみましょう：（アニメーション効果はここに埋め込む必要がありますが、アニメーションを処理できないので、テキストで説明します）アニメーション効果は、すべての畫像が一緒に重ねられているため、1つの畫像のみが表示されることを示しています。

この重複を避けるために、各畫像のアニメーションを遅らせる必要があります。

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

狀況が改善されました！

コンテナのオーバーフローを非表示にすると、スライダーが既に表示されますが、各畫像が移動する前に短時間見えるようにアニメーションをわずかに更新します。

これを行うためにアニメーションキーフレームを更新します：

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我們稍后將看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

90DEG（360DEG/4、ここで4は畫像の數(shù)）ごとに

>少量の一時停止を追加します。次の畫像にスライドする前に、各畫像は可視期間の総持続時間（27％-22％、52％-47％など）の5％のままです。アニメーションをより美しくするためにcubic-bezier()関數(shù)を使用して更新します：（アニメーション効果をここに埋め込む必要がありますが、アニメーションを処理できないので、省略します）animation-timing-function今、私たちのスライダーは完璧です！まあ、ほぼ完璧です。なぜなら、私たちはまだ最終的なタッチアップを逃しているからです。私たちのイメージの周りを回転するカラフルな丸い境界線です。ラッパーで擬似要素を使用して作成できます：

.gallery背景として繰り返される円錐形の勾配を備えた円を作成し、塗りつぶし領(lǐng)域のみを表示するマスキングトリックを使用しました。次に、畫像に定義された同じアニメーションを適用します。 （アニメーション効果はここに埋め込む必要がありますが、アニメーションを処理できないため、省略します）

.gallery > img {
  /* 與之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

完了です！クールなループスライダーがあります：

さらに畫像を追加しましょう

4つの畫像を使用するのは良いことですが、任意の數(shù)の畫像に拡張できる場合はさらに優(yōu)れています。結(jié)局のところ、これは畫像スライダーの目的です。 n寫真を考慮することができるはずです。

これを行うために、SASSを?qū)毪工毪长趣摔瑜?、コードをより一般的にします。まず、畫像數(shù)（$ n）の変數(shù)を定義し、ハードコーディングされた畫像數(shù)（4）の各部分を更新します。

遅延から始めましょう：

遅延の式は（1- $ i）*duration/$ nです。これは、次のSASSループを提供します。

本當(dāng)に必要な場合は、持続時間を変數(shù)にすることもできます。しかし、アニメーションを維持しましょう：

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

パターンをよりよく表示するように簡素化しましょう：

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

各狀態(tài)間のステップサイズは、25％、つまり100％/4に等しい - -360DEG/4の-90DEG角度を追加します。これは、このようなループを書くことができることを意味します：

.gallery {
  padding: calc(var(--s) / 20); /* 此處需要填充 */
  position: relative;
}

.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* 繼承相同的填充 */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.gallery::after,
.gallery > img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

各畫像はアニメーションの5％を占めているため、これを変更します。

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

…そしてこれ：

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

この例で選択した値は5％であることに注意する必要があります。また、各畫像が表示されたままである時間を制御するための変數(shù)として設(shè)定することもできます。簡単にするためにこれをスキップしますが、宿題としてこれを試して、コメントで実裝を共有できます！

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我們稍后將看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

最後のポイントは、transform-originを更新することです。幾何學(xué)的なスキルが必要です。構(gòu)成は、畫像の數(shù)に関係なく常に同じです。畫像（小さな円）を大きな円の中に配置し、半徑Rの値を見つける必要があります。

退屈な幾何學(xué)的な説明が必要ないかもしれないので、ここでr：

を見つける方法は次のとおりです。

.gallery > img {
  /* 與之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

これをパーセンテージとして表現(xiàn)すれば、次のようになります。

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

…これは、

値が等しいことを意味します transform-origin

完了です！任意の數(shù)の畫像用のスライダーがあります！

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

そこに9枚の寫真を追加しましょう：（ 9枚の寫真のスライダー効果をここに埋め込む必要がありますが、寫真やアニメーションを処理できないので、省略します）

同じ數(shù)の畫像を追加し、畫像の合計數(shù)で$ n変數(shù)を更新します。

要約

CSS変換と標(biāo)準(zhǔn)ジオメトリを使用するいくつかのトリックを使用して、多くのコードなしで素敵なループスライダーを作成しました。このスライダーのクールな點は、円があるため、無限のアニメーションを保持するために畫像をコピーすることを気にする必要がないことです。完全な回転の後、最初の畫像に戻ります！