如何制作带有悬浮元素的轮播（Carousel）组件

以下几个方案可以实现你需要的轮播效果：

• Swiper.js
  这是生态成熟、功能全面的轮播库，支持中心突出、缩放过渡、自动播放等多种效果，完全匹配你图中的需求。
  简易实现代码：

  <!-- 引入Swiper的CSS和JS文件（可从官方渠道下载后本地引入） -->
  <link rel="stylesheet" href="swiper-bundle.min.css" />
  <script src="swiper-bundle.min.js"></script>
  
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  
  <script>
    const swiper = new Swiper(".mySwiper", {
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>
  

  上述配置会生成中心幻灯片突出、两侧幻灯片缩放带阴影的效果，和你展示的样式高度契合。

• Glide.js
  轻量级轮播库，体积小巧，支持自定义过渡动画和交互逻辑，适合对页面加载性能有要求的场景。

• 纯CSS基础实现
  如果不想依赖第三方库，可利用CSS的scroll-snap属性实现基础的中心对齐轮播：

  <div class="carousel">
    <div class="carousel-slides">
      <div class="slide">Slide 1</div>
      <div class="slide">Slide 2</div>
      <div class="slide">Slide 3</div>
      <div class="slide">Slide 4</div>
      <div class="slide">Slide 5</div>
    </div>
  </div>
  
  <style>
    .carousel {
      overflow: hidden;
      width: 80%;
      margin: 0 auto;
    }
    .carousel-slides {
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: scroll;
      scroll-behavior: smooth;
      padding: 20px 0;
    }
    .slide {
      scroll-snap-align: center;
      flex: 0 0 60%;
      height: 200px;
      background-color: #e0e0e0;
      margin: 0 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }
    .carousel-slides::-webkit-scrollbar {
      display: none;
    }
  </style>
  

  这个方案无需JS就能实现平滑滚动+中心对齐的效果，若需要自动播放、导航按钮等功能，可自行添加少量JS代码补充。

内容的提问来源于stack exchange，提问作者BinChanhKun