如何在React JS中实现滑块提供了设计文件

发布于 2025-02-10 09:30:20 字数 163 浏览 4 评论 0原文

我想实现一个看起来像

我尝试了许多诸如Swiper和Splide之类的图书馆，但未能实现那。

谢谢您的宝贵时间！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

欢你一世 2025-02-17 09:30:20

您只需将CSS 转换和比例添加到活动幻灯片和下一个幻灯片，如果您使用的是Swiper。

使用SCSS的示例

.swiper-slide {
  transition: all 0.3s;
  transform: scale(0.8) translateX(13%) translateY(10%);
  max-width: 50%;

  &.swiper-slide-active {
      transform: scale(1.2) translateX(9%);
  }

  &.swiper-slide-next {
      transform: scale(0.8) translateX(13%) translateY(10%);
  }
}

You can simply add CSS transform and scale to the active slide and the next slide if you are using swiper.

Example using scss

.swiper-slide {
  transition: all 0.3s;
  transform: scale(0.8) translateX(13%) translateY(10%);
  max-width: 50%;

  &.swiper-slide-active {
      transform: scale(1.2) translateX(9%);
  }

  &.swiper-slide-next {
      transform: scale(0.8) translateX(13%) translateY(10%);
  }
}

回复收藏 0 原文

~没有更多了~