How to Make a CSS-Only Carousel

This tutorial details creating a fully functional carousel using only CSS, eliminating the need for JavaScript or jQuery. We'll build a carousel with left-side image navigation and a larger image gallery on the right.

The foundation is simple HTML: a wrapper div containing a navigation (<nav></nav>) and a gallery (<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">Copy after login</div></div> <p>Images, sourced from a free resource like Unsplash, are added to both the navigation and the gallery. Navigation images link to corresponding gallery images using 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;How to Make a CSS-Only Carousel &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 hoop&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;How to Make a CSS-Only Carousel&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 hoop&quot;&gt; &lt;/div&gt;</pre><div class="contentsignin">Copy after login</div></div> <p>CSS provides the layout using <code>grid:

img {
  display: block;
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-template-rows: 2fr 1fr; /* Default mobile layout */
  grid-gap: 10px;
  overflow: hidden;
  height: 100vh;
}

.gallery {
  overflow-x: scroll; /* Default mobile scroll */
  overflow-y: hidden;
  display: flex;
  scroll-snap-type: x mandatory; /* Enable snapping */
}

.gallery__img {
  scroll-snap-align: start;
  min-height: 100vh;
  object-fit: cover;
}

For larger screens, a media query adjusts the layout:

@media screen and (min-width: 1200px) {
  .wrapper {
    grid-template-columns: 1fr 5fr;
    grid-template-rows: auto;
  }
  .lil-nav {
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
  }
  .gallery {
    display: block;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
  }
}

Smooth scrolling is achieved with scroll-behavior: smooth; in the .gallery styles. Further styling enhances the navigation images:

.lil-nav a {
  height: 200px;
  display: flex;
  margin-bottom: 10px;
}

.lil-nav__img {
  object-fit: cover;
  filter: saturate(0);
  transition: 0.3s ease all;
}

.lil-nav__img:hover {
  transform: scale(1.05);
  filter: saturate(1);
}

This creates a responsive, CSS-only carousel. While functional, consider accessibility (e.g., screen reader compatibility) and performance optimizations (e.g., lazy loading) for production use.

The above is the detailed content of How to Make a CSS-Only Carousel. For more information, please follow other related articles on the PHP Chinese website!