Carousel CSS yang fleksibel, dipertingkatkan dengan navigasi JavaScript

Membina komponen karusel serba boleh yang dengan mudah mengendalikan pelbagai item, memberikan tatal yang lancar, dan menawarkan navigasi butang dinamik adalah cabaran biasa. Tutorial ini membimbing anda melalui membuat komponen seperti itu menggunakan React dan CSS.

Matlamat kami adalah karusel responsif dengan peralihan yang lancar dan navigasi intuitif. Kami akan memanfaatkan JavaScript, React, dan DOM API.

Persediaan Projek

Mari kita mulakan dengan membuat aplikasi React baru dan memasang styled-components :

 NPX Create-React-App-App-Easy-Carousel
CD React-Easy-Carousel
Benang menambah komponen gaya
Benang memasang
Benang bermula

Untuk memudahkan gaya, kami akan menggunakan komponen gaya yang telah ditetapkan:

 // app.styled.js
import yang digayakan dari 'gaya-komponen';

Eksport Const H1 = Styled ('H1') `
  Teks-Align: Pusat;
  Margin: 0;
  Padding-Bottom: 10rem;
`;

Eksport const relatif = gaya ('div') `
  Kedudukan: Relatif;
`;

Eksport flex = gaya ('div') `
  Paparan: Flex;
`;

Eksport Const HorizontalCenter = gaya (flex) `
  Justify-Content: Center;
  margin-kiri: auto;
  margin-kanan: auto;
  max-width: 25rem;
`;

Eksport Const Container = Styled ('Div') `
  Ketinggian: 100VH;
  Lebar: 100%;
  Latar Belakang: #ECF0F1;
`;

Eksport const item = gaya ('div') `
  Warna: Putih;
  saiz font: 2rem;
  Teks-transform: memanfaatkan;
  lebar: $ {({size}) => `$ {size} rem`};
  ketinggian: $ {({saiz}) => `$ {size} rem`};
  Paparan: Flex;
  Align-item: pusat;
  Justify-Content: Center;
`;

Seterusnya, kami akan menyusun komponen App.js kami:

 // app.js
import {carousel} dari './carousel';

aplikasi fungsi () {
  kembali (
    <container>
      <h1 id="Carousel-mudah">Carousel mudah</h1>
      <horizontalcenter>
        <carousel>
          {/ * Item karusel akan pergi ke sini */}
        </carousel>
      </horizontalcenter>
    </container>
  );
}

aplikasi lalai eksport;

Membina Komponen Carousel

Komponen karusel akan menggunakan utama<div> bekas dan kawasan scrollable dalaman.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> // carousel.js // ... (penyata import dan komponen gaya akan ditambah kemudian) const carousel = ({children}) =&gt; { // ... (jsx dan logik akan ditambah kemudian) }; mengeksport karusel lalai;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <h4 id="Menatal-lancar-berasaskan-CSS"> Menatal lancar berasaskan CSS</h4> <p> Kami akan menggunakan CSS Scroll Snapping untuk peralihan yang lancar dan menyembunyikan bar skrol:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> // carousel.styled.js import yang digayakan dari 'gaya-komponen'; import {flex} dari './app.styled'; eksport const carouselContainer = styled ('div') ``; // tambahkan gaya kemudian Eksport const carouselContainerinner = gaya (flex) ` limpahan-X: tatal; tatal-snap-jenis: x mandatori; -ms-overflow-gaya: Tiada; / * Iaitu dan tepi */ Width scrollbar: Tiada; / * Firefox */ &amp; ::-WebKit-scrollbar { Paparan: Tiada; / * Chrome, safari, opera */ } &amp;&gt; * { scroll-snap-align: pusat; } `; // ... (komponen gaya lain akan ditambah kemudian)</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> <code>scroll-snap-type dan scroll-snap-align memastikan skrol dan memusatkan item yang lancar.

Mari buat beberapa item sampel:

 // 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>
    {warna}
  </item>
));

Dan tambahkannya ke karusel:

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

Kami akan menambah jarak dan menyesuaikan margin dalam Carousel.styled.js untuk rayuan visual yang lebih baik.

Butang navigasi

Untuk meningkatkan karusel, kami akan menambah butang navigasi. Kami akan menggunakan anak panah SVG mudah:

 // arrow.js
eksport 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>
);

eksport 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>
);

Selebihnya pelaksanaan (termasuk cangkuk usePosition , penglihatan butang dinamik, dan penambahbaikan kebolehaksesan) akan mengikuti struktur yang sama dengan kod asal, tetapi dengan kejelasan dan organisasi yang lebih baik. Oleh kerana kekangan panjang, saya tidak dapat menghasilkan semula keseluruhan kod yang tinggal di sini. Walau bagaimanapun, struktur dan penjelasan yang disediakan harus membolehkan anda melaksanakan ciri -ciri yang tersisa berdasarkan kod asal. Ingatlah untuk menggabungkan cangkuk useCallback untuk pengoptimuman prestasi dan mengendalikan logik menatal dalam usePosition untuk mengemas kini penglihatan butang berdasarkan item yang kelihatan sekarang. Akhirnya, tambahkan atribut ARIA yang sesuai untuk kebolehcapaian.

Atas ialah kandungan terperinci Carousel CSS yang fleksibel, dipertingkatkan dengan navigasi JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!