Chrome 新特性纯css轮播图_谷歌更新css最新轮播图-CSDN博客

本文链接：https://blog.csdn.net/weixin_44208880/article/details/147614215

Chrome 新特性纯css轮播图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css轮播图</title>
  <style>

    .carousel {
      anchor-name: --carousel;
      margin: 50px auto;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 400px;
      scroll-behavior: smooth;
      scrollbar-width: none;
      counter-reset: item;
      padding: 0;
      container-type: inline-size scroll-state;
      inline-size: 400px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-marker-group: after;

      &::scroll-marker-group {
        position: fixed;
        position-anchor: --carousel;
        position-area: block-end;
        margin: 10px;
        display: grid;
        grid-auto-columns: 20px;
        grid-auto-flow: column;
        gap: 10px;
      }

      & > li::scroll-marker {
        content: ' ';
        aspect-ratio: 1/1;
        background-color: #0fddd3;
        border-radius: 50%;
      }

      & > li::scroll-marker:target-current {
          background-color: red;
        }

      &::scroll-button(*) {
      position: fixed;
      position-anchor: --carousel;
      font-size: 20px;
      inline-size: 44px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      border: 1px solid #ddd;
      margin: 0 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    &::scroll-button(right) {
      position-area: inline-end center;
      content: '>' / 'Next';
    }
    
    &::scroll-button(left) {
      position-area: inline-start center;
      content: '<' / 'Previous';
    }

    & > li {
    scroll-snap-align: center;
    padding: 0;
    display: inline-grid;
    aspect-ratio: 3/2;
    container-type: scroll-state;

    .img{
      width: 100%;
      font-size: 36px;
      display: flex;
      align-items: center;
      justify-content: center;

      @container not scroll-state(snapped: x) {
        interactivity: inert;
        opacity: .5;
      }
    }
  }
}
</style>
</head>
<body>
  <ul class="carousel">
    <li>
      <div tabindex="0" class="img" style="background-color: #4263eb;">1</div>
    </li>
    <li>
      <div tabindex="0"  class="img" style="background-color: #daeb42;">2</div>
    </li>
    <li>
      <div tabindex="0"  class="img" style="background-color: #e96686;">3</div>
    </li>
    <li>
      <div tabindex="0"  class="img" style="background-color: #eb7842;">4</div>
    </li>
    <li>
      <div tabindex="0"  class="img" style="background-color: #ff0800;">5</div>
    </li>
    <li>
      <div tabindex="0"  class="img" style="background-color: #7a8cd6;">6</div>
    </li>
    <li>
      <div tabindex="0"  class="img" style="background-color: #42eba5;">7</div>
    </li>
    <li>
      <div tabindex="0"  class="img" style="background-color: #42b6eb;">8</div>
    </li>
    <li>
      <div tabindex="0"  class="img" style="background-color: #dd42eb;">9</div>
    </li>
    <li>
      <div tabindex="0"  class="img" style="background-color: #0fddd3;">10</div>
    </li>
  <ul>
</body>
</html>