Cara Membuat Carousel CSS-Only

Butiran tutorial ini mewujudkan karusel berfungsi sepenuhnya menggunakan hanya CSS, menghapuskan keperluan untuk JavaScript atau jQuery. Kami akan membina karusel dengan navigasi imej sebelah kiri dan galeri imej yang lebih besar di sebelah kanan.

Yayasan ini mudah HTML: Div pembungkus yang mengandungi navigasi (<nav></nav> ) dan galeri (<div> ) elemen.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div class=&quot;wrapper&quot;&gt; &lt;nav class=&quot;lil-nav&quot;&gt;&lt;/nav&gt; &lt;div class=&quot;gallery&quot;&gt;&lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>Imej, yang diperoleh dari sumber percuma seperti Unsplash, ditambah kepada kedua -dua navigasi dan galeri. Imej Navigasi Pautan ke Imej Galeri Bersama Menggunakan IDS:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;nav class=&quot;lil-nav&quot;&gt; &lt;a href=&quot;https://www.php.cn/link/c60a617f9800bf968672bda753787d99&quot;&gt; &lt;img src=&quot;/static/imghw/default1.png&quot; data-src=&quot;https://img.php.cn/&quot; class=&quot;lazy&quot; alt=&quot;Cara Membuat Carousel CSS-Only&quot;&gt; &lt;/a&gt; &lt;a href=&quot;https://www.php.cn/link/911b10b73d26005b82c8d2b5256f2403&quot;&gt; &lt;img src=&quot;/static/imghw/default1.png&quot; data-src=&quot;...&quot; class=&quot;lazy&quot; alt=&quot;Gelung bola keranjang&quot;&gt; &lt;/a&gt; &lt;/nav&gt; &lt;div class=&quot;gallery&quot;&gt; &lt;img src=&quot;/static/imghw/default1.png&quot; data-src=&quot;...&quot; class=&quot;lazy&quot; id=&quot;image-1&quot; alt=&quot;Cara Membuat Carousel CSS-Only&quot;&gt; &lt;img src=&quot;/static/imghw/default1.png&quot; data-src=&quot;...&quot; class=&quot;lazy&quot; id=&quot;image-2&quot; alt=&quot;Gelung bola keranjang&quot;&gt; &lt;/div&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>CSS memberikan susun atur menggunakan <code>grid :

 img {
  paparan: blok;
  Max-Width: 100%;
}

.Wrapper {
  paparan: grid;
  Grid-template-baris: 2FR 1FR; / * Susun atur mudah alih lalai */
  Grid-Gap: 10px;
  Limpahan: Tersembunyi;
  Ketinggian: 100VH;
}

.Gallery {
  limpahan-X: tatal; / * Tatal mudah alih lalai */
  limpahan-y: tersembunyi;
  Paparan: Flex;
  tatal-snap-jenis: x mandatori; / * Membolehkan snapping */
}

.gallery__img {
  SCROLL-SNAP-ALIGN: Mula;
  Min-ketinggian: 100VH;
  Objek-Fit: Cover;
}

Untuk skrin yang lebih besar, pertanyaan media menyesuaikan susun atur:

 Skrin @media dan (Min-lebar: 1200px) {
  .Wrapper {
    Grid-template-lajur: 1FR 5FR;
    grid-template-baris: auto;
  }
  .Lil-nav {
    limpahan-y: tatal;
    limpahan-X: Tersembunyi;
    paparan: blok;
  }
  .Gallery {
    paparan: blok;
    limpahan-y: tatal;
    limpahan-X: Tersembunyi;
    tatal-snap-jenis: y mandatori;
  }
}

Skrol licin dicapai dengan scroll-behavior: smooth; dalam gaya .gallery . Gaya lebih lanjut meningkatkan imej navigasi:

 .Lil-nav a {
  Ketinggian: 200px;
  Paparan: Flex;
  Margin-Bottom: 10px;
}

.Lil-nav__img {
  Objek-Fit: Cover;
  penapis: tepu (0);
  Peralihan: 0.3s memudahkan semua;
}

.Lil-nav__img: hover {
  Transform: Skala (1.05);
  Penapis: tepu (1);
}

Ini mewujudkan karusel yang responsif, CSS sahaja. Walaupun berfungsi, pertimbangkan kebolehaksesan (contohnya, keserasian pembaca skrin) dan pengoptimuman prestasi (contohnya, pemuatan malas) untuk kegunaan pengeluaran.

Atas ialah kandungan terperinci Cara Membuat Carousel CSS-Only. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!