slider gambar (juga dikenali sebagai karusel) boleh didapati di mana -mana. Terdapat banyak helah CSS untuk membuat slider biasa di mana gambar slaid dari kiri ke kanan (atau sebaliknya). Banyak perpustakaan JavaScript juga membuat slider yang indah dengan animasi yang kompleks. Dalam artikel ini, kita tidak akan melakukan apa -apa perkara ini.

kami akan meneroka beberapa slider CSS yang mewah dan tidak biasa melalui satu siri artikel. Jika anda bosan melihat slider klasik yang sama, anda berada di tempat yang betul!

CSS Slider Series

slider gambar putaran kitaran
• (kedudukan semasa anda)
Layari gambar polaroid
Slider 3D Infinite

Dalam jawatan pertama, kita akan bermula dengan apa yang saya panggil "gelung giliran gambar gelung":

Ia sejuk, bukan? Mari analisis kod!

struktur html

Jika anda telah mengikuti siri saya pada hiasan gambar yang indah atau grid CSS dan bentuk tersuai, maka anda akan tahu bahawa peraturan pertama saya adalah menggunakan sedikit HTML yang mungkin. Saya sentiasa berjuang untuk mencari penyelesaian CSS dan kemudian merosakkan kod dengan banyak

dan barangan lain. Peraturan yang sama berlaku di sini - Kod kami tidak lebih daripada satu siri imej dalam bekas. <div> Katakan kita menggunakan empat gambar: <p> </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> itu sahaja! Sekarang mari kita masuk ke bahagian yang menarik dari kod tersebut. Tetapi pertama, kita akan menggali ke dalamnya untuk memahami logik bagaimana slider kita berfungsi. <p> </p> bagaimana untuk bekerja? <h3> </h3> Ini adalah video, dari mana saya mengeluarkan <p> CSS supaya kita dapat memahami dengan lebih baik bagaimana imej bergerak: (video itu harus dibenamkan di sini, tetapi kerana saya tidak dapat mengendalikan video, saya akan menerangkannya dalam teks) video menunjukkan empat imej berputar berlawanan arah jam dengan lingkaran besar. Semua imej adalah saiz yang sama (diwakili oleh S dalam angka). Perhatikan bulatan biru, yang merupakan bulatan yang memotong pusat semua imej dan mempunyai radius (r). Kami memerlukan nilai ini untuk animasi kami kemudian. R sama dengan 0.707 * S. (Saya akan melangkau pengiraan geometri yang diberikan persamaan.) <code>overflow: hidden

mari kita tulis beberapa CSS!

kami akan menggunakan grid CSS untuk meletakkan semua imej di kawasan yang sama di atas satu sama lain:

.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;
}

Setakat ini, tidak ada yang terlalu rumit. Bahagian rumit adalah animasi.

Kami telah membincangkan berputar bulatan besar, tetapi pada hakikatnya, kami akan memutar setiap imej secara individu, mewujudkan ilusi bulatan berputar yang besar. Oleh itu mari kita tentukan animasi

dan gunakannya pada elemen imej: m

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

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

Trik utama adalah untuk menyerlahkan baris. Secara lalai, harta CSS

adalah sama dengan pusat (atau 50% 50%), yang menjadikan imej berputar di sekitar pusatnya, tetapi kita tidak perlu berbuat demikian. Kami memerlukan imej untuk berputar di sekitar pusat transform-origin bulatan besar yang mengandungi imej kami, jadi nilai baru . transform-origin

s Oleh kerana r adalah sama dengan 0.707 * s, kita boleh mengatakan bahawa r adalah sama dengan 70.7% daripada saiz imej. Berikut adalah graf untuk menggambarkan bagaimana kita mendapat nilai 120.7%: (imej harus tertanam di sini, tetapi kerana saya tidak dapat mengendalikan imej, saya akan menerangkannya dalam teks) imej menunjukkan hubungan geometri mengira nilai asal transformasi.

mari kita jalankan animasi dan lihat apa yang berlaku: (kesan animasi harus tertanam di sini, tetapi kerana saya tidak dapat mengendalikan animasi, saya akan menerangkannya dalam teks) kesan animasi menunjukkan bahawa hanya satu imej yang dapat dilihat kerana semua imej ditumpangkan bersama.

kita perlu melambatkan animasi setiap imej untuk mengelakkan pertindihan ini.

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

Keadaan telah bertambah baik!

Jika kita menyembunyikan limpahan pada bekas, kita sudah dapat melihat gelangsar, tetapi kita akan mengemas kini animasi sedikit supaya setiap imej dapat dilihat untuk masa yang singkat sebelum bergerak.

kami akan mengemas kini kerangka utama animasi kami untuk melakukan ini:

.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;
}

untuk setiap 90deg (360deg/4, di mana 4 adalah bilangan imej), kami akan menambah jeda kecil. Setiap imej akan kekal 5%daripada jumlah tempoh tempoh yang boleh dilihat (27%-22%, 52%-47%, dan lain-lain) sebelum meluncur ke imej seterusnya. Saya akan mengemas kini cubic-bezier() dengan fungsi animation-timing-function untuk menjadikan animasi lebih cantik: (kesan animasi harus tertanam di sini, tetapi kerana saya tidak dapat mengendalikan animasi, saya akan meninggalkannya)

sekarang gelangsar kami sempurna! Nah, hampir sempurna, kerana kita masih kehilangan sentuhan terakhir: sempadan bulat yang berwarna-warni yang berputar di sekitar imej kita. Kita boleh menciptanya menggunakan elemen pseudo pada pembungkus .gallery:

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

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

Saya mencipta bulatan dengan kecerunan kerucut berulang sebagai latar belakang, sambil menggunakan helah masking yang hanya memaparkan kawasan mengisi. Kemudian saya menggunakan animasi yang sama yang ditakrifkan untuk imejnya. (Kesan animasi harus tertanam di sini, tetapi kerana saya tidak dapat mengendalikan animasi, saya akan meninggalkannya)

Kami sudah selesai! Kami mempunyai gelangsar gelung sejuk:

mari tambahkan lebih banyak gambar

Adalah baik untuk menggunakan empat imej, tetapi lebih baik jika kita dapat mengembangkannya ke beberapa imej. Lagipun, ini adalah tujuan slider gambar. Kita sepatutnya dapat mempertimbangkan gambar n.

Untuk melakukan ini, kami akan membuat kod lebih umum dengan memperkenalkan SASS. Pertama, kami menentukan pembolehubah untuk bilangan imej ($ n) dan kami akan mengemas kini setiap bahagian bilangan imej kami yang keras (4).

mari kita mulakan dengan kelewatan:

.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 */

Formula untuk kelewatan adalah (1 - $ i)*durasi/$ n, yang memberi kita gelung sass berikut:

@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); }
}

kita juga boleh membuat tempoh pembolehubah jika kita benar -benar mahu. Tetapi mari kita teruskan animasi:

.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);
}

mari kita memudahkannya untuk melihat corak yang lebih baik:

.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 */

Saiz langkah antara setiap keadaan adalah sama dengan 25% -iaitu, 100%/4 -kami menambah sudut -90deg sudut -iaitu, -360deg/4. Ini bermakna kita boleh menulis gelung seperti ini:

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i) / $n} * 8s);
  }
}

Oleh kerana setiap imej menyumbang 5% daripada animasi, kita mengubahnya:

@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); }
}

... dan ini:

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

Perlu diperhatikan bahawa 5% adalah apa -apa nilai yang saya pilih untuk contoh ini. Kami juga boleh menetapkannya sebagai pembolehubah untuk mengawal berapa lama setiap imej harus kelihatan. Saya akan melangkau ini untuk kesederhanaan, tetapi sebagai kerja rumah anda boleh cuba melakukan ini dan berkongsi pelaksanaan anda dalam komen!

.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;
}

Titik terakhir adalah untuk mengemas kini transform-origin. Kami memerlukan beberapa kemahiran geometri. Konfigurasi sentiasa sama tanpa mengira bilangan imej. Kami meletakkan imej (bulatan kecil) di dalam bulatan besar dan kami perlu mencari nilai radius R.

anda mungkin tidak mahu penjelasan geometri yang membosankan, jadi inilah cara mencari r:

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

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

Jika kita menyatakan ini sebagai peratusan, kita dapat:

.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 */

... ini bermakna bahawa nilai transform-origin sama dengan:

@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); }
}

Kami sudah selesai! Kami mempunyai gelangsar untuk beberapa imej!

mari tambahkan sembilan gambar di sana: (Kesan gelangsar sembilan gambar harus tertanam di sini, tetapi kerana saya tidak dapat mengendalikan gambar dan animasi, saya akan menghilangkannya)

Tambah seberapa banyak imej dan kemas kini pembolehubah $ n dengan jumlah imej.

Ringkasan

Dengan beberapa cara menggunakan transformasi CSS dan geometri standard, kami mencipta gelung gelung yang bagus tanpa banyak kod. Perkara yang keren mengenai gelangsar ini ialah kita tidak perlu bersusah payah menyalin imej untuk mengekalkan animasi tak terhingga kerana kita mempunyai bulatan. Selepas putaran penuh, kami akan kembali ke imej pertama!