Wie man ein CSS-Karussell macht

In diesem Tutorial wird ein voll funktionsfähiges Karussell mit nur CSS erstellt, wodurch JavaScript oder JQuery erforderlich ist. Wir bauen ein Karussell mit linker Bildnavigation und einer größeren Bildergalerie auf der rechten Seite.

Die Stiftung ist einfach HTML: eine Wrapper -Div mit einer Navigation (<nav></nav> ) und eine Galerie (<div> ) Element.<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">Nach dem Login kopieren</div></div> <p>Bilder, die aus einer kostenlosen Ressource wie Unsplash bezogen werden, werden sowohl zur Navigation als auch der Galerie hinzugefügt. Navigationsbilder Link zu entsprechenden Galeriebildern mit 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;Wie man ein CSS-Karussell macht&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;Basketball -Reifen&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;Wie man ein CSS-Karussell macht&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;Basketball -Reifen&quot;&gt; &lt;/div&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>CSS liefert das Layout mit <code>grid :

 img {
  Anzeige: Block;
  Max-Breite: 100%;
}

.Wrapper {
  Anzeige: Grid;
  Grid-Template-Reihen: 2fr 1fr; / * Standard mobiles Layout */
  Raster-Lücke: 10px;
  Überlauf: versteckt;
  Höhe: 100VH;
}

.GALLERY {
  Überlauf-X: Scrollen; / * Standard mobiler Schriftrolle */
  Überlauf-y: versteckt;
  Anzeige: Flex;
  Scroll-SNAP-Typ: x obligatorisch; / * Aktivieren Sie das Schnappen */
}

.Gallery__img {
  Scroll-Snap-Align: Start;
  min-hohe: 100VH;
  Objekt-Fit: Deckung;
}

Für größere Bildschirme passt eine Medienfrage das Layout an:

 @media Bildschirm und (Min-Width: 1200px) {
  .Wrapper {
    Grid-Template-Säulen: 1fr 5fr;
    Grid-Template-Reihen: Auto;
  }
  .lil-nav {
    Überlauf-y: Scroll;
    Überlauf-X: versteckt;
    Anzeige: Block;
  }
  .GALLERY {
    Anzeige: Block;
    Überlauf-y: Scroll;
    Überlauf-X: versteckt;
    Scroll-SNAP-Typ: y obligatorisch;
  }
}

Glattes Bildlauf wird mit scroll-behavior: smooth; in den .gallery -Stilen. Weiteres Styling verbessert die Navigationsbilder:

 .lil-nav a {
  Höhe: 200px;
  Anzeige: Flex;
  Randboden: 10px;
}

.lil-nav__img {
  Objekt-Fit: Deckung;
  Filter: gesättigt (0);
  Übergang: 0,3s lindern alle;
}

.lil-nav__img: Hover {
  Transformation: Skala (1,05);
  Filter: gesättigt (1);
}

Dies schafft ein reaktionsschnelles CSS-Karussell. Betrachten Sie die Barrierefreiheit (z. B. Bildschirmleserkompatibilität) und Leistungsoptimierungen (z. B. faulen Laden) für die Produktionsanwendung.

Das obige ist der detaillierte Inhalt vonWie man ein CSS-Karussell macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!